رسم أعمدة

الاستعمال

1. انسخ tokens.css إلى مشروعك واربطه قبل أنماط المكوّن.
2. ألصق ترميز HTML حيث تريده.
3. ألصق CSS في ورقتك — محدِّداته مقصورةٌ على صنف المكوّن فلا تتسرّب.
4. ألصق JS بعد الترميز، أو حمّله بـdefer.
5. اضبط dir على rtl أو ltr — المكوّن يعمل بالاثنين.

الحالات

تركيزمُحدَّدتحميلخطأفارغ

العربية والإنجليزية

يعمل بالاتّجاهين — عربيًّا وإنجليزيًّا. مفروضٌ في كل بناء بـ، ومُجرَّبٌ في الملعب أعلاه.

الاستجابة

بلا عرضٍ ثابت يفيض، وتخطيطٌ يتمدّد.

الوصول

• كل حقلٍ مسمّى، ولا ARIA زائدة —
• يُدار بلوحة المفاتيح كاملًا
• يحمل دورًا دلاليًّا صريحًا

الحركة

انتقالاتٌ قصيرة عند التمرير والتركيز. ويتوقّف لمن فضّل تقليل الحركة.

التبعيّات

• tokens.css — كل لونٍ وقياسٍ في المكوّن يشير إلى توكن، ولا قيمة صريحة فيه
• script.js — سلوك المكوّن فيه — وبدونه يُعرض ولا يعمل

أمثلة

• بالإنجليزية — الاتّجاه ينقلب والتخطيط يتبعه
• بالوضع الفاتح — الألوان من التوكنات فتتبع الثيم
• على مسرح الجوّال — العرض 360 بكسل
• بلا حركة — كما يراه من فضّل تقليل الحركة

ما يقاربه

إطار رسممفتاح سلاسللوحة الموارد البشرية

مصفوفة التحقّق

المُتحقَّقُ منه ما تشهد له بوّابةٌ تعمل في كلّ بناء. والمدعومُ مقيسٌ من الملفّات بلا بوّابةٍ تشهد له — فلا يُدَّعى فوق قدره.