Lily Design System™

آموزش Svelte

کتابخانه Svelte از Lily پیاده‌سازی مرجع است: runes در Svelte 5، props نوع‌دار، پخش props باقی‌مانده و پیوند دوطرفه با bind:value.

چه چیزی می‌سازید

یک فرم تماس کوچک — فیلد دارای برچسب، دکمه ارسال، پیوند دوطرفه، رفتار واقعی صفحه‌کلید و صفحه‌خوان — ابتدا ساده، سپس استایل‌دار، در حدود ۱۰ دقیقه.

پیش از شروع

به git، Node 22 یا جدیدتر و pnpm 10 یا جدیدتر نیاز دارید. هر پروژه Svelte 5 کار می‌کند — یک برنامه تازه npx sv create کافی است.

گام ۱ — کد را بگیرید

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 ، آزمون‌ها، story‌ها و مستندات آن کنار هم. پوشه‌های لازم را در برنامه خود کپی کنید، یا به مخزن وابسته شوید و مستقیم وارد کنید.

گام ۲ — نخستین مؤلفه شما

<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">. props نوع‌دار هستند: type, disabled, pressed (نمایش می‌دهد aria-pressed (نمایش می‌دهد label (یک aria-label برای دکمه‌های تغییر وضعیت)،

گام ۳ — یک فرم کوچک بسازید

<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 را به‌عنوان prop خودش، نه مؤلفه برچسب تودرتو — آن را یک‌بار بدهید، روی Fieldو TextInputمتناظر label نام قابل‌دسترس را فراهم می‌کند. TextInput's value برای بازنویسی)، و هر ویژگی اضافی روی ریشه پخش می‌شود. $bindable یک prop bind:value rune است، پس

تأییدشده در ۲۰۲۶-۰۸-۲۹: بی‌درنگ پیوند دوطرفه به شما می‌دهد. svelte/server دقیقاً همین قطعه از طریق کامپایل شد <label for> و برای یک برچسب واحد و درست‌پیوندخورده بررسی شد Label درون Field— یک پیش‌نویس قبلی دو برچسب (یکی خالی) نمایش می‌داد، چون Field خودش از ورودی label جداگانه‌ای را درون آن قرار داده بود که نمایش می‌داد مسیر ترکیبی فرم تماس همین الگوست، با آزمون‌های واقعی e2e و axe سنجیده شده.

کارتان را بررسی کنید: برنامه را اجرا کنید و فرم ساده به نظر می‌رسد — دقیقاً همان‌طور که قصد شده: استایل‌دهی هنوز در پیش است. بزنید Tab: تمرکز از هر کنترل می‌گذرد، برچسب اعلام می‌شود و ارسال کار می‌کند. رفتار کامل است؛ ظاهر مال شماست و گام بعدی است.

گام ۴ — استایل بدهید

همه‌چیز بالا به‌صورت ساختار خالص رندر می‌شود، آماده برای استایل‌های شما. قلاب‌های کلاس را استایل بدهید — .button, .text-input, .label, .field — در شیوه‌نامه سراسری خود، یا یک تم آماده را در این‌جا پیوند دهید app.html: 

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

تنظیمات برای هر نمونه از طریق class prop انجام می‌شود که به قلاب پایه افزوده می‌شود: <Button class="wide"> نمایش می‌دهد class="button wide".

گام ۵ — همه‌چیز را در حال کار ببینید

برنامه نمونه 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

گام‌های بعدی

در مسیر پرسشی دارید؟ صفحه راهنما پر از پاسخ است — و اگر گامی می‌تواند روشن‌تر باشد، به ما بگویید و ما با کمال میل آموزش را بهبود می‌دهیم.