מדריך Svelte

מה תבנו

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

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

אתם צריכים git, Node 22 ומעלה ו-pnpm 10 ומעלה. כל פרויקט Svelte 5 מתאים — אפליקציה חדשה npx sv create לגמרי מספיקה.

שלב 1 — קבלו את הקוד

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-headless
pnpm install
pnpm test        # vitest — thousands of component cases
pnpm run storybook   # browse all 571 components

הרכיבים חיים ב- src/lib/components/{Name}/, ספרייה אחת לכל רכיב עם קובץ ה- .svelte שלו, הבדיקות, ה-stories והתיעוד זה לצד זה. העתיקו את הספריות שאתם צריכים לאפליקציה שלכם, או תלו במאגר וייבאו ישירות.

שלב 2 — הרכיב הראשון שלכם

<script>
  import Button from "#lib/components/Button/Button.svelte";

  function save() { console.log("saved"); }
</script>

<Button onclick={save}>Save</Button>

מציג <button class="button" type="button">. המאפיינים מוקלדים: type, disabled, pressed (מציג aria-pressed עבור כפתורי החלפה), label ( aria-label עקיפה), וכל מאפיין נוסף מתפזר על השורש.

שלב 3 — הרכיבו טופס קטן

<script>
  import Form from "#lib/components/Form/Form.svelte";
  import Field from "#lib/components/Field/Field.svelte";
  import TextInput from "#lib/components/TextInput/TextInput.svelte";
  import Button from "#lib/components/Button/Button.svelte";

  let name = $state("");
</script>

<Form label="Contact form" onsubmit={handleSubmit}>
  <Field label="Full name" required>
    <TextInput id="name" label="Full name" bind:value={name} required />
  </Field>
  <Button type="submit">Save</Button>
</Form>

Field לוקח את ה label כמאפיין משלו ולא כרכיב תווית מקונן — העבירו אותה פעם אחת, על Field, ו TextInputהתואם ב- label מספק את השם הנגיש. TextInput's value הוא $bindable מאפיין rune, ולכן bind:value נותן לכם קשירה דו-כיוונית מיד.

שלב 4 — עצבו אותו

כל מה שלמעלה מוצג כמבנה טהור, מוכן לעיצוב שלכם. עצבו את ווי המחלקה — .button, .text-input, .label, .field — בגיליון הסגנון הגלובלי שלכם, או קשרו ערכת נושא מוכנה ב- app.html:

<link rel="stylesheet" href="/themes/dark.css" />

התאמות לכל מופע עוברות דרך class המאפיין, שמצורף לוו הבסיס: <Button class="wide"> מציג class="button wide".

שלב 5 — ראו הכול עובד

אפליקציית הדוגמה SvelteKit היא אותו קטלוג מעוצב במלואו, עם הדגמות חיות, בדיקות e2e של Playwright וקו בסיס נגישות של axe-core:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-sveltekit-examples
pnpm install && pnpm run dev

השלבים הבאים

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

שאלות בדרך? עמוד העזרה מלא בתשובות — ואם שלב יכול להיות ברור יותר, ספרו לנו ונשמח לשפר את המדריך.