Jetpack Compose Academy · पाठ

Text, Outlined और Icon Buttons

काम के अनुसार सही button variant चुनिए।

पाठ 2, कुल 4 में से13 चरण

Text, Outlined और Icon Buttons, CoddyKit पर Jetpack Compose Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Jetpack Compose Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Jetpack Compose Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

बटनों के अलग-अलग रूप होते हैं

हर कार्रवाई के लिए गहरे रंग वाला भरा हुआ बटन ज़रूरी नहीं होता। Compose कई बटन रूप देता है, जिनमें से हर एक अलग स्तर की प्रमुखता दर्शाता है। 🎨

भरा हुआ बटन

मानक बटन भरा हुआ और अधिक प्रमुख होता है। यह तुरंत ध्यान खींचता है, इसलिए इसे हर स्क्रीन की केवल एक मुख्य कार्रवाई के लिए रखें।

Button(onClick = { pay() }) {
    Text("Pay now")
}

दूसरी कार्रवाई के लिए OutlinedButton

OutlinedButton में केवल किनारा होता है, भराव नहीं। भरे हुए बटन के साथ रखा जाए तो यह स्पष्ट, लेकिन द्वितीयक विकल्प लगता है।

OutlinedButton(onClick = { cancel() }) {
    Text("Cancel")
}

कम प्रमुखता के लिए TextButton

TextButton में केवल लेबल होता है, न किनारा न भराव। यह Learn more या संवाद के विकल्पों जैसी शांत कार्रवाइयों के लिए एकदम सही है।

TextButton(onClick = { dismiss() }) {
    Text("Not now")
}

प्रमुखता एक क्रम है

इसे प्रमुखता की सीढ़ी की तरह समझें: भरा हुआ सबसे अधिक उभरा हुआ, आउटलाइन वाला मध्यम और टेक्स्ट वाला सबसे शांत होता है। कार्रवाई के महत्व के अनुसार रूप चुनें।

बटनों के अंदर आइकन

कोई भी बटन अपनी सामग्री वाली पंक्ति में आइकन और लेबल रख सकता है। आइकन और टेक्स्ट को आपस में चिपकने से रोकने के लिए थोड़ी दूरी जोड़ें।

Button(onClick = { add() }) {
    Icon(Icons.Default.Add, null)
    Spacer(Modifier.width(8.dp))
    Text("Add")
}

IconButton

IconButton एक छोटा, बिना लेबल वाला टैप क्षेत्र है जिसमें केवल एक आइकन होता है। यह टूलबार और ऐप-बार की कार्रवाइयों के लिए आदर्श है।

IconButton(onClick = { share() }) {
    Icon(Icons.Default.Share, "Share")
}

अपने आइकन का हमेशा वर्णन करें

केवल आइकन वाले बटन को contentDescription दें, ताकि स्क्रीन रीडर उसका उच्चारण कर सकें। शून्य विवरण उसे सुगम्यता से छिपा देता है।

IconButton(onClick = { favorite() }) {
    Icon(Icons.Default.Favorite, "Favorite")
}

प्रमुखता के लिए FilledIconButton

क्या आपको ऐसा आइकन बटन चाहिए जो उभरकर दिखे? FilledIconButton ठोस पृष्ठभूमि जोड़ता है, जिससे उसकी प्रमुखता सादे रूप से अधिक हो जाती है।

FilledIconButton(onClick = { record() }) {
    Icon(Icons.Default.Mic, "Record")
}

सही रूप चुनें

सही चुनाव उपयोगकर्ताओं का मार्गदर्शन करता है: पुष्टि के लिए भरा हुआ, वैकल्पिक विकल्प के लिए आउटलाइन वाला, बंद करने के लिए टेक्स्ट वाला और कम जगह में IconButton।

एक ही onClick, अलग रूप

हर रूप एक ही onClick अनुबंध साझा करता है। आप केवल दृश्य महत्व बदलते हैं, कार्रवाई को जोड़ने का तरीका नहीं।

त्वरित जाँच

आपको केवल लेबल वाली, बिना किनारे और बिना भराव की शांत, कम प्रमुखता वाली कार्रवाई चाहिए।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: सही साधन, सही टैप

अब आपके पास एक साधन-संग्रह है: भरा हुआ बटन, OutlinedButton, TextButton और IconButton। प्रमुखता को कार्रवाई के अनुरूप रखें और अपने आइकन को लेबल दें। ✨

शुरुआत निःशुल्क

एआई शिक्षक के साथ Kotlin सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Text, Outlined और Icon Buttons” पाठ निःशुल्क है?

हाँ—“Text, Outlined और Icon Buttons” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Jetpack Compose Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Jetpack Compose Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Text, Outlined और Icon Buttons” में मैं क्या सीखूँगा?

काम के अनुसार सही button variant चुनिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Jetpack Compose Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Jetpack Compose Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Jetpack Compose Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“Text, Outlined और Icon Buttons” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Jetpack Compose Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Jetpack Compose Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Jetpack Compose Academy पर वापस जाएँ