المكوّنات · نافذة نمطيّة

نافذة نمطيّة

نافذة أصليّة: مصيدة تركيز من المتصفّح وخلفيّة inert

3 تصاميم من هذه العائلة
اللغةالاتّجاهالثيمالمسرحالانحناءالحركةالكثافةمتقدّم

بلا ركيزة في هذا المكوّن: الصيغة — وضابطٌ لا يغيّر شيئًا لا يُعرض.

اكتب بريدك لتظهر الشيفرة — مرّة واحدة على الموقع كلّه.

اكتب بريدك لعرض الشيفرة والبرومبت

مرّة واحدة. لا كلمة مرور، ولا حساب.

الاستعمال

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

الحالات

تمريرتركيزمعطَّلخطأفارغ

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

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

الاستجابة

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

الوصول

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

الحركة

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

التبعيّات

لا تبعيّة خارجية — لا CDN ولا حزمة تُنزَّل.

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

أمثلة

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

القدرةالحالالشاهد
RTLمُتحقَّقcheck-rtl
LTRمُتحقَّقcheck-rtl
الداكنمُتحقَّقcheck-themes
الفاتحمُتحقَّقcheck-themes
التباينمُتحقَّقcheck-contrast
الوصولمُتحقَّقa11y.test · check-aria
لوحة المفاتيحمُتحقَّقcheck-keyboard
التوكناتمُتحقَّقcheck-raw-colors
التعريبمدعوممقيسٌ من الملفّات
الحركةمدعوممقيسٌ من الملفّات
تقليل الحركةمدعوممقيسٌ من الملفّات
اللمسمدعوممقيسٌ من الملفّات
مفاتيح المكوّنمدعوممقيسٌ من الملفّات

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

لم يُوثَّق بعد: متى تستعمله · متى لا تستعمله — يحتاج حكمًا بشريًّا، ولن يُولَّد نثرٌ يبدو حكمًا وليس به.