इंटरैक्शन स्टेट
स्टेट लेयर, "पहले ख़ाली जगह, फिर रिंग" वाला फ़ोकस इंडिकेटर, और अक्षम स्टेट कैसे बनाया जाता है।
इंटरैक्टिव कंपोनेंट स्टेट की एक ही शब्दावली साझा करते हैं: enabled, hovered, focused, pressed, dragged, selected, activated, error, loading और disabled। कंपोनेंट का स्पेक उन स्टेट की सूची देता है जिन्हें वह सपोर्ट करता है, और हर प्लैटफ़ॉर्म को वे सभी इम्प्लीमेंट करने होते हैं।
होवर, फ़ोकस, दबाना और ड्रैग एक स्टेट लेयर से दिखाए जाते हैं: एक पारभासी ओवरले, जो कंपोनेंट के कंटेनर को ढकता है।
- लेयर कॉन्टेंट का रंग लेती है, यानी जिस चीज़ को वह ढकती है उसका
on-रोल। फ़िल्ड बटन पर यहon-primaryहै; टेक्स्ट बटन पर यह लेबल का रंग है। - इसकी ओपैसिटी टोकन से आती है, कंपोनेंट से नहीं।
- एक समय में सिर्फ़ एक लेयर दिखती है। जब स्टेट एक-दूसरे पर आ जाएँ, तो सबसे प्रबल जीतता है: दबाया हुआ फ़ोकस से ऊपर, फ़ोकस होवर से ऊपर।
- यह इफ़ेक्ट के एक छोटे ट्रांज़िशन में फ़ेड होकर आती है, और दबाने पर तुरंत प्रकट होती है।
हल्का चयन भी एक लेयर है, और वही लेयर जो बनी रहती है: सूची का चुना हुआ विकल्प, मेन्यू का मौजूदा लिंक आइटम और टोनल टैब का इंडिकेटर अपने कॉन्टेंट के रंग में selected-state-layer-opacity पर बनाए जाते हैं, जो होवर लेयर का दोगुना है, और आइटम जिस भी सतह पर हो उसके ऊपर रखे जाते हैं। इसलिए किसी भी सतह पर चुना हुआ आइटम होवर किए गए आइटम से उतना ही अलग दिखता है जितना होवर किया गया आइटम सामान्य आइटम से। होवर, फ़ोकस और दबाने की लेयर इसके ऊपर रखी जाती हैं, और चयन कभी सिर्फ़ फ़िल से नहीं बताया जाता: चेक, निशान या लेबल भी उसे बताते हैं।
| टोकन | मान | नमूना |
|---|---|---|
--tanrei-sys-state-disabled-container-opacity | 0.12 (12%) | AaAa |
--tanrei-sys-state-disabled-content-opacity | 0.38 (38%) | AaAa |
--tanrei-sys-state-dragged-state-layer-opacity | 0.16 (16%) | AaAa |
--tanrei-sys-state-focus-state-layer-opacity | 0.1 (10%) | AaAa |
--tanrei-sys-state-hover-state-layer-opacity | 0.08 (8%) | AaAa |
--tanrei-sys-state-pressed-state-layer-opacity | 0.1 (10%) | AaAa |
--tanrei-sys-state-selected-state-layer-opacity | 0.16 (16%) | AaAa |
इससे जनरेट किया गया: design/tokens/tanrei.light.tokens.json, tokens/sys/state.tokens.json
अलग-अलग कंटेनर पर लेयर देखने के लिए नीचे के बटनों पर होवर करें और उन्हें दबाएँ:
स्टेट लेयर
कीबोर्ड फ़ोकस सरफ़ेस के रंग की 2px की ख़ाली जगह और उसके बाद focus-ring रोल की 2px की रिंग के रूप में बनता है। ख़ाली जगह यह गारंटी देती है कि रिंग तब भी दिखे जब कंपोनेंट का अपना फ़िल रिंग के रंग के क़रीब हो, और इस रोल को सरफ़ेस के मुक़ाबले 3:1 कंट्रास्ट के लिए जाँचा जाता है।
- रिंग कीबोर्ड और सहायक तकनीक के फ़ोकस के लिए दिखाई जाती है, पॉइंटर के क्लिक के लिए नहीं।
- यह कभी ऐनिमेट नहीं होती।
- यह कंपोनेंट के शेप के अनुसार चलती है, बाहर की ओर खिसकी हुई।
Tanrei दबाने पर फैलता हुआ रिपल नहीं बनाता। दबाए हुए स्टेट की स्टेट लेयर ही फ़ीडबैक है। थीम रिपल के लिए ऑप्ट-इन कर सकती है, पर कोई कंपोनेंट उस पर निर्भर नहीं है।
अक्षम कंपोनेंट अपना कंटेनर on-surface की disabled-container-opacity पर और अपना कॉन्टेंट disabled-content-opacity पर बनाता है, कोई स्टेट लेयर नहीं दिखाता, और फ़ोकस के क्रम से बाहर हो जाता है। अक्षम एलिमेंट कंट्रास्ट की आवश्यकताओं से मुक्त हैं, और यही इन्हें कम इस्तेमाल करने का एक कारण है।
संकेत
बेहतर यह है कि क्रिया को सक्षम रखा जाए और इस्तेमाल किए जाने पर बताया जाए कि क्या कमी है। अक्षम बटन किसी को नहीं बता सकता कि वह अक्षम क्यों है।