फ़्लोटिंग ऐक्शन बटन

फ़्लोटिंग ऐक्शन बटन (एफ़एबी), एक ऐसा बटन होता है जो उपयोगकर्ता को ऐप्लिकेशन में मुख्य कार्रवाई करने की सुविधा देता है. यह एक ही मुख्य कार्रवाई को बढ़ावा देता है. यह वह कार्रवाई होती है जिसे उपयोगकर्ता आम तौर पर करते हैं. यह आम तौर पर स्क्रीन के नीचे दाईं ओर मौजूद होती है.

यहां इस्तेमाल के तीन उदाहरण दिए गए हैं. इनमें आपको FAB का इस्तेमाल करना पड़ सकता है:

• नया आइटम बनाएं: नोट लेने वाले ऐप्लिकेशन में, FAB का इस्तेमाल तुरंत नया नोट बनाने के लिए किया जा सकता है.
• नया संपर्क जोड़ें: चैट ऐप्लिकेशन में, FAB ऐसा इंटरफ़ेस खोल सकता है जिसकी मदद से उपयोगकर्ता, बातचीत में किसी व्यक्ति को जोड़ सकता है.
• जगह को बीच में रखना: मैप इंटरफ़ेस में, FAB मैप को उपयोगकर्ता की मौजूदा जगह पर बीच में रख सकता है.

मटीरियल डिज़ाइन में, चार तरह के एफ़एबी होते हैं:

• एफ़एबी: सामान्य साइज़ का फ़्लोट करने वाला कार्रवाई बटन.
• छोटा एफ़एबी: यह फ़्लोटिंग ऐक्शन बटन का छोटा वर्शन होता है.
• बड़ा एफ़एबी: यह फ़्लोटिंग ऐक्शन बटन का बड़ा वर्शन होता है.
• एक्सटेंडेड एफ़एबी: यह फ़्लोट करने वाला कार्रवाई बटन होता है. इसमें सिर्फ़ आइकॉन के अलावा और भी चीज़ें होती हैं.

एपीआई सरफ़ेस

फ़्लोटिंग ऐक्शन बटन बनाने के लिए, कई कंपोज़ेबल का इस्तेमाल किया जा सकता है. ये कंपोज़ेबल, मटीरियल डिज़ाइन के मुताबिक होते हैं. हालांकि, इनके पैरामीटर में ज़्यादा अंतर नहीं होता. आपको इन मुख्य पैरामीटर का ध्यान रखना चाहिए:

• onClick: जब उपयोगकर्ता बटन दबाता है, तब इस फ़ंक्शन को कॉल किया जाता है.
• containerColor: बटन का रंग.
• contentColor: आइकॉन का रंग.

फ़्लोट करने वाला कार्रवाई बटन

सामान्य फ़्लोट करने वाला कार्रवाई बटन बनाने के लिए, बुनियादी FloatingActionButton कंपोज़ेबल का इस्तेमाल करें. यहां दिए गए उदाहरण में, फ़्लोटिंग ऐक्शन बटन (एफ़एबी) को लागू करने का सामान्य तरीका बताया गया है:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

लागू होने पर यह इस तरह दिखता है:

छोटा बटन

छोटा फ़्लोट करने वाला कार्रवाई बटन बनाने के लिए, SmallFloatingActionButton कंपोज़ेबल का इस्तेमाल करें. यहां दिए गए उदाहरण में, पसंद के हिसाब से रंग जोड़ने के साथ-साथ ऐसा करने का तरीका बताया गया है.

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(Icons.Filled.Add, "Small floating action button.")
    }
}
FloatingActionButton.kt

लागू होने पर यह इस तरह दिखता है:

बड़ा बटन

बड़ा फ़्लोट करने वाला कार्रवाई बटन बनाने के लिए, LargeFloatingActionButton कंपोज़ेबल का इस्तेमाल करें. यह कंपोज़ेबल, अन्य उदाहरणों से ज़्यादा अलग नहीं है. हालांकि, इससे बड़ा बटन बनता है.

यहां बड़े एफ़एबी को लागू करने का आसान तरीका बताया गया है.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

लागू होने पर यह इस तरह दिखता है:

बड़ा किया गया बटन

ExtendedFloatingActionButton कंपोज़ेबल की मदद से, ज़्यादा मुश्किल फ़्लोटिंग ऐक्शन बटन बनाए जा सकते हैं. इसमें और FloatingActionButton में मुख्य अंतर यह है कि इसमें icon और text पैरामीटर मौजूद हैं. इनसे, ज़्यादा जटिल कॉन्टेंट वाला बटन बनाया जा सकता है. यह बटन, कॉन्टेंट के हिसाब से अपने-आप छोटा-बड़ा हो जाता है.

इस स्निपेट में, ExtendedFloatingActionButton को लागू करने का तरीका बताया गया है. साथ ही, icon और text के लिए उदाहरण वैल्यू पास की गई हैं.

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}
FloatingActionButton.kt

लागू होने पर यह इस तरह दिखता है:

अन्य संसाधन

• सामान्य बटन
• Material UI के दस्तावेज़