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

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

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

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

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

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

एपीआई सरफेस

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

• 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 के दस्तावेज़