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

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

इन तीन स्थितियों में एफ़एबी का इस्तेमाल किया जा सकता है:

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

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

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

एपीआई सरफ़ेस

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

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

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

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

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

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

छोटा बटन

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

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

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

बड़ा बटन

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

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

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

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

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

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

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

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

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

अन्य संसाधन

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