حالات التفاعل
طبقات الحالة، ومؤشر التركيز المكوَّن من فجوة ثم حلقة، وكيف تُرسم حالة التعطيل.
تشترك المكوّنات التفاعلية في مفردات واحدة للحالات: التفعيل (enabled)، والتحويم (hovered)، والتركيز (focused)، والضغط (pressed)، والسحب (dragged)، والتحديد (selected)، والتنشيط (activated)، والخطأ (error)، والتحميل (loading)، والتعطيل (disabled). تسرد مواصفة المكوّن الحالات التي يدعمها، وعلى كل منصة أن تنفّذها كلها.
يُعرض التحويم والتركيز والضغط والسحب بواسطة طبقة حالة: تراكب شبه شفاف يغطي حاوية المكوّن.
- تأخذ الطبقة لون المحتوى، أي دور
on-لما تغطيه. على الزر من الطراز filled هوon-primary؛ وعلى الزر من الطراز text هو لون التسمية. - عتامتها تأتي من رمز (token)، لا من المكوّن.
- لا تظهر إلا طبقة واحدة في كل مرة. حين تتداخل الحالات تغلب الأقوى: الضغط ثم التركيز ثم التحويم.
- تظهر تدريجيًّا بانتقال تأثيرات قصير، وتظهر فورًا عند الضغط.
التحديد الهادئ طبقةٌ أيضًا، وهو الطبقة التي تبقى: الخيار المحدد في قائمة، وعنصر الرابط الحالي في قائمة منسدلة، ومؤشر علامات التبويب من الطراز tonal، كلها تُرسم بلون محتواها عند 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 بلون السطح تتبعها حلقة بعرض 2px بالدور focus-ring. تضمن الفجوة أن تبقى الحلقة مرئية حتى حين تكون تعبئة المكوّن نفسه قريبة من لون الحلقة، ويُفحص الدور للتأكد من تباين 3:1 مقابل الأسطح.
- تظهر الحلقة عند التركيز بلوحة المفاتيح أو بالتقنيات المساعدة، لا عند النقر بالمؤشر.
- لا تُحرَّك أبدًا.
- تتبع شكل المكوّن، مُزاحةً نحو الخارج.
لا يرسم Tanrei تموّجًا متمدّدًا عند الضغط. طبقة الحالة في وضع الضغط هي الاستجابة. يجوز للسمة أن تختار تفعيل التموّج، لكن لا يعتمد عليه أي مكوّن.
يرسم المكوّن المعطَّل حاويته بالعتامة disabled-container-opacity ومحتواه بالعتامة disabled-content-opacity من on-surface، ولا يعرض طبقة حالة، ويخرج من ترتيب التركيز. العناصر المعطَّلة معفاة من متطلبات التباين، وهذا سبب لاستخدامها باقتصاد.
نصيحة
الأفضل أن تُبقي الإجراء مفعَّلًا وأن تشرح ما ينقص عند استخدامه. الزر المعطَّل لا يستطيع أن يخبر أحدًا لماذا هو معطَّل.