Lily Design System™

למדו את Lily, צעד אחר צעד

ברוכים הבאים! כל מדריך מתחיל מאפס ובונה את אותו דבר קטן — טופס נגיש ומעוצב — בכ-10 דקות, כדי שתוכלו להשוות מסגרות בצורה הוגנת. לאחר מכן העמיקו עם ערכות נושא והעדפות משתמש.

לפני שמתחילים

אתם צריכים מעט להפתיע:

  • עבור מדריך ה-HTML — רק דפדפן ועורך טקסט. זו כל ערכת הכלים.
  • עבור Svelte, React, Vue, Angular או Nunjucks — git, Node 26 ו-pnpm 10 ומעלה.
  • עבור Blazor — git וה- .NET SDK 8 ומעלה.

חדשים ברכיבים ללא ראש? אתם במקום הנכון — כל מדריך מסביר מה קורה תוך כדי התקדמות, וכל שלב מציג את הקוד המדויק להעתקה.

ארבעה שלבים מאפס לשחרור

  1. הרכיב הראשון שלכם (~5 דקות) — בחרו את המסגרת שלכם למטה, קבלו את הקוד והציגו Button.
  2. הרכיבו ועצבו (~5 דקות) — בנו טופס עם תוויות ועצבו אותו מול ווי מחלקה בסגנון kebab-case (חלק מכל מדריך מסגרת).
  3. הוסיפו ערכת נושא (~15 דקות) — החליפו את ה-CSS שכתבתם ביד באחת מ-57 ערכות הנושא המוכנות, ואז תנו למשתמשים להחליף בזמן ריצה: מדריך ערכות נושא.
  4. כבדו העדפות (~15 דקות) — הוסיפו בחירת שפה וגודל טקסט עם עוזרי ההעדפות: מדריך העוזרים.

בחרו את המסגרת שלכם

HTML

העתיקו HTML סמנטי עם ווי המחלקה והתחילו — דפדפן ועורך הם כל מה שצריך.

~10 דקות · ההתחלה הקלה ביותר

Svelte

Runes של Svelte 5, snippets, ו bind:value קשירה דו-כיוונית.

~10 דקות

React

רכיבי פונקציה עם value + onChange והפצת rest-prop.

~10 דקות

Vue

רכיבי קובץ יחיד של Vue 3 עם תמיכה ב- v-model .

~10 דקות

Angular

רכיבים עצמאיים של Angular עם קלטי signal ו- [(value)].

~10 דקות

Blazor

רכיבי Razor עם פרמטרים, ChildContent, ובדיקות bUnit.

~10 דקות

Nunjucks

מאקרואים שמוצגים בשרת עבור Eleventy וכל צינור תבניות של Node.

~10 דקות

מתלבטים? התחילו עם HTML — הוא מלמד את חוזה ווי המחלקה שכל שאר המסגרות חולקות, והוא רץ ישירות מקובץ.

העמיקו

ערכות נושא

קשרו אחת מ-57 ערכות הנושא המוכנות — 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: פקדים ללא ראש עם עמידות, בטיחות SSR וזיהוי RTL אוטומטי.

~15 דקות

אחרי המדריכים

  • עיינו ב קטלוג הרכיבים — כל רכיב מתעד את המאפיינים, חוזה ARIA והתנהגות המקלדת שלו.
  • שכפלו אפליקציית דוגמה כדי לראות את כל 571 הרכיבים מעוצבים ופועלים יחד — ה-CSS מכוון לאותם ווי מחלקה שהרגע השתמשתם בהם, אז העתיקו כל חלק ממנו לפרויקט שלכם והתאימו כרצונכם.
  • שאלות? עמוד העזרה מכיל תשובות, שאלות נפוצות ודרכים להגיע לאדם ידידותי. ואם מדריך יכול להיות ברור יותר, ספרו לנו — נשמח לשפר אותו.