Jetpack Compose Academy · पाठ

Labels, Placeholders और Leading Icons

inputs को स्पष्ट और सहज बनाइए।

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

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

इनपुट को उपयोगकर्ता-अनुकूल बनाएँ

सिर्फ़ एक खाली बॉक्स उपयोगकर्ता को अनुमान लगाने पर मजबूर करता है। लेबल, प्लेसहोल्डर और आइकन साधारण फ़ील्ड को ऐसा फ़ील्ड बना देते हैं जो उपयोगकर्ता का guides करता है। 🧭

लेबल स्लॉट

label फ़ील्ड का नाम बताता है। फ़ील्ड खाली होने पर यह अंदर रहता है, फिर फ़ोकस होने या टेक्स्ट भरने पर बॉर्डर के ऊपर तैरता है।

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") }
)

प्लेसहोल्डर जोड़ें

placeholder संकेत देने वाला टेक्स्ट है, जो केवल फ़ील्ड खाली होने पर दिखता है। इसका इस्तेमाल उदाहरण के लिए करें, फ़ील्ड के नाम के लिए नहीं।

placeholder = { Text("you@example.com") }

लेबल बनाम प्लेसहोल्डर

फ़ील्ड की पहचान बताने के लिए label हमेशा दिखाई देता है। उपयोगकर्ता के लिखना शुरू करते ही प्लेसहोल्डर गायब हो जाता है। दोनों को साथ इस्तेमाल करें।

शुरुआती आइकन

leadingIcon फ़ील्ड की शुरुआत में रहता है। ईमेल बॉक्स के पास बना लिफ़ाफ़ा उसका उद्देश्य तुरंत स्पष्ट कर देता है।

leadingIcon = {
    Icon(Icons.Default.Email, contentDescription = null)
}

अंतिम आइकन भी

trailingIcon फ़ील्ड के अंत में रहता है। यह साफ़ करने वाले बटन या पासवर्ड की दृश्यता बदलने के लिए उपयोगी है।

trailingIcon = {
    Icon(Icons.Default.Clear, contentDescription = "Clear")
}

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

हर आइकन को contentDescription दें, ताकि स्क्रीन रीडर उसका नाम सुना सकें। केवल सजावटी आइकन होने पर ही null दें।

अंतिम आइकन को टैप करने योग्य बनाएँ

अंतिम आइकन को IconButton में लपेटें, ताकि उपयोगकर्ता उसे टैप कर सके—जैसे एक टैप में फ़ील्ड साफ़ करने के लिए।

trailingIcon = {
    IconButton(onClick = { email = "" }) {
        Icon(Icons.Default.Clear, "Clear")
    }
}

सहायक टेक्स्ट

supportingText फ़ील्ड के नीचे छोटा संकेत दिखाता है, जैसे प्रारूप की याद दिलाना या अक्षर सीमा बताना, बिना इनपुट को भरा-भरा किए।

supportingText = { Text("We never share your email.") }

सोच-समझकर मिलाएँ

लेबल, आइकन और छोटा प्लेसहोल्डर पर्याप्त हैं। बहुत अधिक संकेत noise पैदा करते हैं, इसलिए हर फ़ील्ड को सरल और स्पष्ट रखें।

स्लॉट केवल कम्पोज़ेबल हैं

हर स्लॉट, जैसे label और leadingIcon, कम्पोज़ेबल रखने वाला एक lambda है। इसका अर्थ है कि आप उनके अंदर अपनी पसंद का कोई भी यूआई रख सकते हैं।

त्वरित जाँच

टेक्स्ट फ़ील्ड से प्लेसहोल्डर कब गायब होता है?

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

पुनरावृत्ति

आपने इनपुट को label, प्लेसहोल्डर संकेतों, शुरुआती और अंतिम आइकन तथा सहायक टेक्स्ट से बेहतर बनाया। उपयोगकर्ता-अनुकूल फ़ील्ड, खुश उपयोगकर्ता। 😊

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

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

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

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

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

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

क्या “Labels, Placeholders और Leading Icons” पाठ निःशुल्क है?

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

“Labels, Placeholders और Leading Icons” में मैं क्या सीखूँगा?

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

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

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

“Labels, Placeholders और Leading Icons” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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