बटन

keywords: AiAssisted, product:JetpackCompose

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

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

एपीआई सरफेस

onClick

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

enabled

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

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

अन्य संसाधन

• फ़्लोटिंग ऐक्शन बटन
• Material Design 3 के बटन के बारे में खास जानकारी