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

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

यहां एफ़एबी के इस्तेमाल के तीन उदाहरण दिए गए हैं:

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

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

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

एपीआई सरफ़ेस

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

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

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

सामान्य फ़्लोट करने वाला कार्रवाई बटन बनाने के लिए, basic 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 के दस्तावेज़