Button

बटन, बुनियादी कॉम्पोनेंट होते हैं. इनकी मदद से, उपयोगकर्ता किसी तय कार्रवाई को ट्रिगर कर सकता है. बटन पांच तरह के होते हैं. नीचे दी गई टेबल में बताया गया है कि ये सभी पांच तरह के बटन कितने कारगर हैं. साथ ही, यह भी बताया गया है कि उनका इस्तेमाल कहां करना चाहिए.

इस इमेज में, Material Design में पांच तरह के बटन दिखाए गए हैं.

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

• onClick: जब उपयोगकर्ता बटन दबाता है, तब कॉल किया जाने वाला फ़ंक्शन.
• enabled: अगर इस पैरामीटर की वैल्यू 'गलत' है, तो बटन उपलब्ध नहीं होगा और बंद रहेगा.
• colors: ButtonColors का एक इंस्टेंस, जो बटन में इस्तेमाल किए गए रंग तय करता है.
• contentPadding: बटन के अंदर की पैडिंग.

भरा हुआ बटन

भरा हुआ बटन कॉम्पोनेंट, बुनियादी Button कॉम्पोज़ेबल का इस्तेमाल करता है. यह डिफ़ॉल्ट रूप से किसी एक रंग से भरा होता है. नीचे दिए गए स्निपेट में, कॉम्पोनेंट को लागू करने का तरीका बताया गया है:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

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

भरा हुआ टोनल बटन

भरा हुआ टोनल बटन कॉम्पोनेंट, FilledTonalButton कॉम्पोज़ेबल का इस्तेमाल करता है. यह डिफ़ॉल्ट रूप से टोनल कलर से भरा होता है.

नीचे दिए गए स्निपेट में, कॉम्पोनेंट को लागू करने का तरीका बताया गया है:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

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

आउटलाइन वाला बटन

आउटलाइन किया गया बटन कॉम्पोनेंट, OutlinedButton कंपोज़ेबल का इस्तेमाल करता है. यह डिफ़ॉल्ट रूप से आउटलाइन के साथ दिखता है.

नीचे दिए गए स्निपेट में, कॉम्पोनेंट को लागू करने का तरीका बताया गया है:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

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

उभरा हुआ बटन

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

नीचे दिया गया स्निपेट कॉम्पोनेंट को लागू करने का तरीका बताता है:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

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

टेक्स्ट बटन

टेक्स्ट बटन कॉम्पोनेंट, TextButton कॉम्पोज़ेबल का इस्तेमाल करता है. बटन को दबाए जाने तक, वह सिर्फ़ टेक्स्ट के तौर पर दिखता है. इसमें डिफ़ॉल्ट रूप से कोई ठोस फ़िल या आउटलाइन नहीं होती.

नीचे दिए गए स्निपेट में, कॉम्पोनेंट को लागू करने का तरीका बताया गया है:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

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

अन्य संसाधन

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