मटीरियल कॉम्पोनेंट

मटीरियल कॉम्पोनेंट के लिए बैनर

डिज़ाइन सिस्टम, बार-बार इस्तेमाल किए जा सकने वाले डिज़ाइन फ़ैसलों का एक कलेक्शन होता है. इसे दिशा-निर्देशों, कॉम्पोनेंट, और पैटर्न के तौर पर दिखाया जाता है. सिस्टम को सबसे छोटे डिज़ाइन प्रिमिटिव में बांटा जा सकता है: जैसे, रंग, टाइप या शेप. ये मिलकर बड़े और जटिल कॉम्पोनेंट बनाते हैं. उदाहरण के लिए, आइकॉन और टेक्स्ट लेबल मिलकर एक बटन कॉम्पोनेंट बनाते हैं. वहीं, कई बटन और एक सरफेस मिलकर एक कार्ड बनाते हैं. डिज़ाइन सिस्टम में, कॉम्पोनेंट और पैटर्न के बारे में डिज़ाइन से जुड़े मौजूदा फ़ैसलों के आधार पर दिशा-निर्देशों का एक सेट भी शामिल होता है.

Material Design, एक ओपन-सोर्स डिज़ाइन सिस्टम है. इसे Google ने बनाया है, ताकि आपको लोगों की ज़रूरतों को ध्यान में रखकर सुंदर प्रॉडक्ट बनाने में मदद मिल सके. Material 3, Material Design का नया वर्शन है.

Material Design Components

मैटेरियल डिज़ाइन, कोड पर आधारित कई कॉम्पोनेंट उपलब्ध कराता है. ये कॉम्पोनेंट, यूज़र इंटरफ़ेस बनाने के लिए इंटरऐक्टिव बिल्डिंग ब्लॉक की तरह काम करते हैं. इन कॉम्पोनेंट को उनके मकसद के आधार पर पांच कैटगरी में व्यवस्थित किया जा सकता है: कार्रवाई, कंटेनमेंट, नेविगेशन, चुनने की सुविधा, और टेक्स्ट इनपुट.

कार्रवाई वाले कॉम्पोनेंट

ऐक्शन कॉम्पोनेंट की मदद से, लोगों को कोई लक्ष्य हासिल करने में मदद मिलती है.

Material में कई तरह के बटन होते हैं. इनकी मदद से, अलग-अलग संदर्भों में कार्रवाइयों और इंटरैक्शन की प्राथमिकता तय की जा सकती है. इसमें मुख्य कार्रवाइयों के लिए FAB या बड़े FAB से लेकर, आइकॉन बटन की मदद से विकल्प चुनने और सेगमेंट किए गए बटन की मदद से विकल्प चुनने तक की सुविधाएं शामिल हैं.

पहली इमेज: कार्रवाई के कॉम्पोनेंट

कम्यूनिकेशन कॉम्पोनेंट

कम्यूनिकेशन कॉम्पोनेंट, उपयोगकर्ताओं को ज़रूरी जानकारी देते हैं. इसके लिए, वे उपयोगकर्ताओं को बैज के ज़रिए सूचना देते हैं, प्रोग्रेस इंडिकेटर के ज़रिए स्टेटस की जानकारी देते हैं, और स्नैकबार के ज़रिए प्रोसेस के बारे में कम शब्दों में मैसेज दिखाते हैं.

दूसरी इमेज: कम्यूनिकेशन

कंटेनमेंट कॉम्पोनेंट

कंटेनमेंट कॉम्पोनेंट में जानकारी और कार्रवाइयां शामिल होती हैं. इनमें बटन, मेन्यू या चिप जैसे अन्य कॉम्पोनेंट भी शामिल होते हैं. ज़्यादातर Material कॉम्पोनेंट, साफ़ तौर पर कॉन्टेंट को शामिल करने की सुविधा का इस्तेमाल करते हैं. इससे मिलते-जुलते कॉन्टेंट और कार्रवाइयों को विज़ुअल ऑब्जेक्ट के साथ ग्रुप किया जा सकता है. जैसे: कार्ड, डायलॉग, बॉटम शीट, साइड शीट, कैरसेल, और टूलटिप. लिस्ट को साफ़ तौर पर या साफ़ तौर पर न दिखाकर भी दिखाया जा सकता है. इसके लिए, दिखने वाले डिवाइडर का इस्तेमाल किया जाता है. ये कॉम्पोनेंट, कॉन्टेंट के ग्रुप दिखाने के लिए सामान्य पैटर्न उपलब्ध कराते हैं.

तीसरी इमेज: कंटेनमेंट

नेविगेशन कॉम्पोनेंट की मदद से, लोग यूज़र इंटरफ़ेस (यूआई) पर आसानी से नेविगेट कर पाते हैं. मोबाइल पर, नेविगेशन बार या नेविगेशन पैनल में, नेविगेशन के मुख्य डेस्टिनेशन होते हैं. टैब, स्क्रीन के सबसे नीचे मौजूद ऐप्लिकेशन बार, और स्क्रीन के सबसे ऊपर मौजूद ऐप्लिकेशन बार से, सहायता से जुड़ी जानकारी और कार्रवाइयों पर जाने के अलग-अलग तरीके मिलते हैं. अपने लेआउट में नेविगेशन का इस्तेमाल करने के बारे में ज़्यादा जानें.

चौथी इमेज: नेविगेशन

चुने गए कॉम्पोनेंट

चुने जाने वाले कॉम्पोनेंट की मदद से, लोग अपनी पसंद के विकल्प चुन सकते हैं. चाहे चेकबॉक्स और रेडियो बटन की मदद से फ़ॉर्म बनाना हो, चिप का इस्तेमाल करके फ़िल्टर करना हो या स्विच और स्लाइडर की मदद से सेटिंग टॉगल करना हो, चुनने वाले कॉम्पोनेंट की मदद से उपयोगकर्ता अपने फ़ैसलों को कंट्रोल कर सकते हैं और उन्हें इनपुट कर सकते हैं.

पांचवीं इमेज: सिलेक्शन

टेक्स्ट इनपुट कॉम्पोनेंट

टेक्स्ट इनपुट वाले कॉम्पोनेंट की मदद से, लोग टेक्स्ट डाल सकते हैं और उसमें बदलाव कर सकते हैं. टेक्स्ट फ़ील्ड, उपयोगकर्ताओं को यूज़र इंटरफ़ेस (यूआई) में टेक्स्ट डालने की सुविधा देता है.

छठी इमेज: टेक्स्ट इनपुट

Compose के लिए डिज़ाइन सिस्टम

Compose का इस्तेमाल करके, डिज़ाइन सिस्टम को ज़्यादा आसानी से लागू करने के बारे में जानने के लिए, Compose में डिज़ाइन सिस्टम लेख पढ़ें. इससे आपको अपने ऐप्लिकेशन को थीम, कॉम्पोनेंट, और डिज़ाइन सिस्टम के अन्य पहलुओं के साथ एक जैसा लुक और फ़ील देने में मदद मिलेगी.