बटन

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

इस इमेज में, मटीरियल डिज़ाइन में मौजूद पांच तरह के बटन दिखाए गए हैं:

एपीआई सरफ़ेस

onClick

वह फ़ंक्शन जिसे सिस्टम, उपयोगकर्ता के बटन दबाने पर कॉल करता है.

enabled

जब false इस पैरामीटर की वैल्यू `false` होती है, तो बटन उपलब्ध नहीं दिखता और काम नहीं करता.

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

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

अन्य संसाधन

• फ़्लोट करने वाला कार्रवाई बटन
• मटीरियल डिज़ाइन 3 बटन की खास जानकारी