التنسيق

عقد التنسيق

يقبل كل جزء عام className وstyle وref ومعالجات الأحداث والخصائص الأصلية وسمات data-* مباشرة. لا توجد خصائص موازية مثل contentClassName أو triggerClassName.

يمتلك uiify سمات الهوية والحالة. وهي نقاط ارتكاز للتنسيق: غيّر الحالة عبر الخصائص أو سلوك HTML الأصلي، ولا تكتب data-state بنفسك. نطاق --uiify-* محجوز للأبعاد والحركة والقيم الخاصة بكل نسخة.

<Popover.Root>
  <Popover.Trigger className="toolbar-trigger">Open</Popover.Trigger>
  <Popover.Content className="toolbar-popover" data-layout="compact">
    Actions
  </Popover.Content>
</Popover.Root>

التسمية

لكل جذر يحمل حالة علامة data-uiify-<component> واحدة يُعتدّ بوجودها. ولكل جزء مركّب قيمة data-part واحدة بصيغة kebab-case، مثل trigger أو content أو item أو label. ولا تستطيع خصائص المستهلك تجاوز هذه القيم.

CSS عادية وTailwind

[data-uiify-popover][data-part="content"] {
  min-inline-size: 12rem;
}

[data-uiify-popover][data-part="content"][data-state="open"] {
  opacity: 1;
}

/* Tailwind uses the same attributes. */
<div className="data-[state=open]:opacity-100" />

تعدّد الأشكال

تستبدل as وrender العنصر المعروض. ويجب أن يمرّر العارض المخصّص الخصائص والمرجع اللذين يتلقاهما إلى عنصر DOM؛ وإلا تعطّلت العلامات والحالة والتنسيق.

behavior.css مطلوبة

تضم ورقة الأنماط هذه قواعد عمل الحالة: تموضع النوافذ المنبثقة، وتحجيم ::details-content، والانتشار عبر :has()، وموضع المدخلات المخفية، وانتقالات @starting-style. ولا تضم ألوانًا أو خطوطًا أو تباعدًا.

import "@gunkin/uiify/components/behavior.css";

بدونها تُعرض المكوّنات لكن حالتها لا تعمل. استوردها مرة واحدة في أي موضع من تطبيقك.

الحالة سمة، وليست فئة

تكشف المكوّنات الحالة بسمات data-* على العنصر الذي يمتلكها، ليختارها CSS دون JavaScript أو أسماء فئات. وتسرد صفحة كل مكوّن السمات التي يصدرها.

.my-trigger[data-state="open"] { … }
.my-item[data-disabled] { … }

/* Native state works the same way, because the state IS native */
.my-panel:popover-open { … }
details[open] > summary { … }

الأنماط البديلة أيضًا سمات data-*، وليست استعلامات أنماط الحاويات؛ فالحاوية لا تستطيع الاستعلام عن نفسها.

القيم مضمنة، والقواعد في ورقة أنماط

تصل قيم كل نسخة كخصائص مخصّصة مضمنة؛ وتوجد جميع القواعد في ورقة أنماط ثابتة. لا تستطيع الأنماط المضمنة التعبير عن الفئات الزائفة أو العناصر الزائفة أو استعلامات الحاويات أو @starting-style، ويعتمد نموذج الحالة عليها جميعًا.

تتدفق الخصائص المضمنة مع HTML دون اختلافات في الإماهة، وتُحلّل ورقة الأنماط الواحدة مرة واحدة وتُخزّن مؤقتًا. أما CSS-in-JS فيحقن كتل <style> في كل حد، ولا يخزّنها مؤقتًا بين الطلبات.

ثلاث طرق للتنسيق

CSS الخاصة بك. اختر العنصر وسماته data-*؛ فلا توجد أنماط افتراضية تحتاج إلى تجاوزها.

Tailwind. تعمل السمات نفسها كأنماط بديلة، مثل data-[state=open]:rotate-180. تنتقل معاينات الموقع إلى تنسيق Tailwind من إعداد التنسيق في الترويسة.

@gunkin/uiify/styles. طبقة CSS عادية اختيارية تضم تدرّجات رموز OKLCH ومظهرين فاتحًا وداكنًا وتنسيقًا لكل مكوّن؛ نقطة بداية وليست متطلبًا.

import "@gunkin/uiify/styles/reset";
import "@gunkin/uiify/styles";

ترتيب التتالي

يقع كل ما يوفّره uiify في طبقة مسماة أدنى من طبقتك:

@layer ui.reset, ui.behavior, ui.tokens, ui.theme, app;

تتقدّم طبقتك دائمًا: لا تحتاج التجاوزات إلى !important أو حيل لزيادة الخصوصية، وتظل سارية بعد إعادة هيكلة المكتبة.

تسرد كل صفحة مكوّن سماته ومتغيرات CSS، مع CSS جاهزة للنسخ لكلا التنسيقين.