सूची की तरह दिखने वाली इमेज, एक कॉलम वाली सूची में कॉन्टेंट को लाइन आइटम के तौर पर दिखाती है, जो वर्टिकल तरीके से स्क्रोल की जाती है. यह व्यू तब सबसे अच्छा लगता है, जब उपयोगकर्ता टेक्स्ट पढ़ने और डेटा देखने के बाद उसे चुनते हैं.
सूची में मौजूद आइटम को ग्रिड आइटम की तुलना में कम वर्टिकल स्पेस की ज़रूरत होती है. इससे स्क्रीन पर ज़्यादा आइटम दिखाए जाते हैं.
शरीर रचना
सूची की तरह दिखाए गए व्यू में, हर पंक्ति में एक टाइल मौजूद होती है, जो सूची के आइटम को दिखाती है. मुख्य कार्रवाइयों से टाइल भर सकती हैं, ताकि उपयोगकर्ता टाइल में कहीं से भी कार्रवाई शुरू कर सकें. आइकॉन और टेक्स्ट की मदद से जोड़ी गई अलग-अलग कार्रवाइयों के लिए, सिर्फ़ आइकॉन और टेक्स्ट वाले क्षेत्र पर कार्रवाई की जा सकती है.
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-anatomy-1.png?authuser=2&hl=hi)
2. स्विचर बटन चालू है
3. स्विचर बटन बंद है
4. प्राइमरी और सेकंडरी टेक्स्ट
5. कॉन्टेंट टाइल
खास जानकारी
एक लाइन में मौजूद आइटम की सूची
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-1.png?authuser=2&hl=hi)
दो-लाइन वाला सूची आइटम
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-3.png?authuser=2&hl=hi)
दो-लाइन वाले सूची आइटम को उलटा गया
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-4.png?authuser=2&hl=hi)
हेडर के साथ एक से ज़्यादा लाइन वाला सूची आइटम
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-5.png?authuser=2&hl=hi)
हेडर के बिना एक से ज़्यादा लाइन वाला सूची आइटम
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-6.png?authuser=2&hl=hi)
टेक्स्ट ओवरफ़्लो वाले आइटम की सूची
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-2.png?authuser=2&hl=hi)
स्प्लिट ऐक्शन वाले आइटम की सूची
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-7.png?authuser=2&hl=hi)
आइटम की सूची में इंडिकेटर आइकॉन का प्लेसमेंट
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-8.png?authuser=2&hl=hi)
स्केलिंग लेआउट
ये रेफ़रंस लेआउट, अलग-अलग चौड़ाई और ऊंचाई वाली स्क्रीन के हिसाब से सूची में आइटम जोड़ने का तरीका दिखाते हैं. (चौड़ाई और ऊंचाई की कैटगरी लेआउट सेक्शन में बताई गई हैं.) ध्यान दें कि डाउन-सैंपलिंग या अप-सैंपलिंग शुरू होने से पहले, सभी पिक्सल वैल्यू रेंडर किए गए पिक्सल में होती हैं.
स्टैंडर्ड, चौड़ी, और ज़्यादा चौड़ी स्क्रीन
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-1.png?authuser=2&hl=hi)
कॉन्टेंट टाइल वाली स्टैंडर्ड, चौड़ी, और ज़्यादा चौड़ी स्क्रीन
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-3.png?authuser=2&hl=hi)
सुपर-वाइड स्क्रीन
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-2.png?authuser=2&hl=hi)
स्टाइल
टाइपाेग्राफ़ी
टाइप करने का स्टाइल | टाइपफ़ेस | वज़न | साइज़ (dp) |
---|---|---|---|
मुख्य भाग एक | Roboto | सामान्य | 32 |
मुख्य भाग 3 | Roboto | सामान्य | 24 |
रंग
एलिमेंट | कलर(दिन मोड) | कलर (नाइट मोड) |
---|---|---|
मुख्य टाइप / आइकॉन | सफ़ेद | सफ़ेद @ 88% |
सेकंडरी टाइप / आइकॉन | सफ़ेद @ 72% | सफ़ेद @ 60% |
डिवाइडर लाइन | सफ़ेद @ 22% | सफ़ेद @ 12% |
सूची आइटम का बैकग्राउंड | काला | काला |
साइज़ बदलना
एलिमेंट | साइज़ (dp) |
---|---|
सूची आइटम की ऊंचाई | 96 (छोटी स्क्रीन) / 116 (स्टैंडर्ड स्क्रीन) / 128 (लंबी स्क्रीन) |
प्राइमरी आइकॉन | 44 |
तीसरा आइकॉन | 24 |
कॉन्टेंट टाइल | सूची आइटम की ऊंचाई 1dp से कम पर सेट करें |
मीडियम अवतार | 76 |
डिवाइडर लाइन की मोटाई | 1 |
उदाहरण
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-1.png?authuser=2&hl=hi)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-2.png?authuser=2&hl=hi)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-3.png?authuser=2&hl=hi)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-4.png?authuser=2&hl=hi)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-5.png?authuser=2&hl=hi)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-6.png?authuser=2&hl=hi)