Lily Design System™

تعلّم Lily خطوة بخطوة

أهلًا بك! يبدأ كل درس من الصفر ويبني الشيء الصغير نفسه — نموذجًا قابلًا للوصول ومنسّقًا — في نحو 10 دقائق، لتقارن أطر العمل على قدم المساواة. ثم تعمّق في السمات وتفضيلات المستخدم.

قبل أن تبدأ

ما تحتاج إليه قليل بشكل مدهش:

  • لدرس HTML — متصفح ومحرر نصوص فقط. هذه هي العدّة كلها.
  • لـ Svelte أو React أو Vue أو Angular أو Nunjucks — git وNode 26 وpnpm 10 أو أحدث.
  • لـ Blazor — git وحزمة تطوير .NET الإصدار 8 أو أحدث.

جديد على مكوّنات headless؟ أنت في المكان الصحيح — فكل درس يشرح ما يجري أثناء العمل، وكل خطوة تعرض الشيفرة الدقيقة لنسخها.

أربع خطوات من الصفر إلى الإطلاق

  1. مكوّنك الأول (نحو 5 دقائق) — اختر إطار عملك أدناه، واحصل على الشيفرة، وارسم زرًا.
  2. ركّب ونسّق (نحو 5 دقائق) — ابنِ نموذجًا بتسميات ونسّقه بفئات الربط بصيغة kebab-case (جزء من كل درس لإطار عمل).
  3. طبّق سمة (نحو 15 دقيقة) — استبدل CSS المكتوب يدويًا بإحدى السمات الجاهزة الـ 45، ثم دع المستخدمين يبدّلونها وقت التشغيل: درس السمات.
  4. احترم التفضيلات (نحو 15 دقيقة) — أضف اختيار اللغة وحجم النص بمساعدات التفضيلات: درس المساعدات.

اختر إطار عملك

HTML

انسخ HTML دلاليًا بفئات الربط وانطلق — يكفي متصفح ومحرر.

نحو 10 دقائق · أسهل بداية

Svelte

رونات Svelte 5 والمقتطفات والربط ثنائي الاتجاه bind:value.

نحو 10 دقائق

React

مكوّنات دالّية مع value + onChange وتمرير الخصائص المتبقية.

نحو 10 دقائق

Vue

مكوّنات Vue 3 أحادية الملف مع دعم v-model.

نحو 10 دقائق

Angular

مكوّنات Angular المستقلة مع مدخلات الإشارات و[(value)].

نحو 10 دقائق

Blazor

مكوّنات Razor مع المعاملات وChildContent واختبارات bUnit.

نحو 10 دقائق

Nunjucks

ماكروات تُعرض على الخادم لـ Eleventy وأي خط معالجة قوالب في Node.

نحو 10 دقائق

محتار بينها؟ ابدأ بـ HTML — فهو يعلّم عقد فئات الربط الذي تشترك فيه أطر العمل الأخرى كلها، ويعمل مباشرة من ملف.

تعمّق أكثر

السمات

اربط إحدى السمات الجاهزة الـ 45 — NHS وGOV.UK وUSWDS وفاتحة وداكنة وغيرها — وتجاوزها بـ CSS الخاص بك، وأضف تبديل السمات وقت التشغيل بمساعد theme-picker.

نحو 15 دقيقة

مساعدات التفضيلات

امنح المستخدمين التحكم في السمة واللغة وحجم النص والحركة والبحث وروابط الصفحات والمشاركة وإدخال التاريخ/الوقت عبر theme-picker وlocale-picker وtext-size-picker وmotion-picker وsearch-picker وlink-picker وshare-picker وdate-time-picker: عناصر تحكم headless مع حفظ للحالة وأمان للعرض على الخادم وكشف تلقائي للكتابة من اليمين إلى اليسار.

نحو 15 دقيقة

بعد الدروس

  • تصفّح فهرس المكوّنات — يوثّق كل مكوّن خصائصه وعقد ARIA وسلوك لوحة المفاتيح.
  • انسخ تطبيق مثال لترى المكوّنات الـ 571 كلها منسّقة وتعمل معًا — يستهدف CSS فيه فئات الربط نفسها التي استخدمتها للتو، فانسخ منه ما شئت إلى مشروعك وعدّله كما تريد.
  • أسئلة؟ في صفحة المساعدة إجابات وأسئلة شائعة وطرق للوصول إلى شخص ودود. وإن كان بإمكان درس ما أن يكون أوضح، أخبرنا — وسنحسّنه بكل سرور.