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

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

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

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

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

• एफ़एबी: सामान्य साइज़ का फ़्लोटिंग ऐक्शन बटन.
• छोटा एफ़एबी: फ़्लोट करने वाला छोटा ऐक्शन बटन.
• बड़ा एफ़एबी: फ़्लोट करने वाला बड़ा ऐक्शन बटन.
• एक्सटेंडेड एफ़एबी: ऐसा फ़्लोटिंग ऐक्शन बटन, जिसमें आइकन.

एपीआई प्लैटफ़ॉर्म

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

• 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

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

अन्य संसाधन

• सामान्य बटन
• यूज़र इंटरफ़ेस (यूआई) के मटीरियल के दस्तावेज़