دليل 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 هي خاصية bind:value rune، لذا

الخطوة 4 — نسِّقه

كل ما سبق يُعرض كبنية خالصة، جاهزة لأنماطك. نسِّق خطّافات الأصناف — .button, .text-input, .label, .field — في ورقة الأنماط العامة لديك، أو اربط سمة جاهزة في app.html:

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

تمرّ التعديلات لكل نسخة عبر الخاصية class التي تُلحق بالخطّاف الأساسي: <Button class="wide"> يعرض class="button wide".

الخطوة 5 — شاهد كل شيء يعمل

تطبيق المثال SvelteKit هو الفهرس نفسه منسَّقًا بالكامل، مع عروض حيّة واختبارات Playwright e2e وخط أساس إمكانية الوصول 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 ولوحة المفاتيح لكل مكوّن.

أسئلة في الطريق؟ صفحة المساعدة مليئة بالإجابات — وإن أمكن توضيح خطوة أكثر، أخبرنا وسنحسّن الدليل بكل سرور.