Lily Design System™

Tutorial Svelte

Perpustakaan Svelte Lily ialah pelaksanaan kanonik: runes Svelte 5, prop bertaip, taburan rest-prop dan pengikatan dua hala dengan bind:value.

Apa yang akan anda bina

Borang hubungan kecil — input berlabel, butang hantar, pengikatan dua hala, tingkah laku papan kekunci dan pembaca skrin yang sebenar — mula-mula kosong, kemudian digayakan, dalam kira-kira 10 minit.

Sebelum anda bermula

Anda memerlukan git, Node 22 atau lebih baharu, dan pnpm 10 atau lebih baharu. Mana-mana projek Svelte 5 boleh digunakan — aplikasi npx sv create baharu pun mencukupi.

Langkah 1 — Dapatkan kod

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

Komponen terletak dalam src/lib/components/{Name}/, satu direktori bagi setiap komponen dengan fail .svelte , ujiannya, story dan dokumennya bersebelahan. Salin direktori yang anda perlukan ke aplikasi anda, atau bergantung pada repo dan import terus.

Langkah 2 — Komponen pertama anda

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

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

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

Memaparkan <button class="button" type="button">. Prop dipertaipkan: type, disabled, pressed (memaparkan aria-pressed untuk butang togol), label ( aria-label penggantian), dan sebarang atribut tambahan ditabur pada akar.

Langkah 3 — Gubah borang kecil

<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 mengambil label sebagai propnya sendiri dan bukannya komponen label bersarang — hantar sekali, pada Field, dan TextInputyang sepadan pada label membekalkan nama boleh diakses. TextInput's value ialah prop rune $bindable jadi bind:value memberi anda pengikatan dua hala serta-merta.

Disahkan 2026-08-29: serpihan tepat ini dikompil melalui svelte/server dan disemak untuk satu <label for> yang dipaut dengan betul — draf awal menyarangkan Label di dalam Fieldberasingan, yang memaparkan dua label (satu kosong) kerana Field sudah memaparkan labelnya sendiri daripada label prop. Yang laluan borang hubungan gubahan ialah corak yang sama, diuji dengan e2e dan ujian axe sebenar.

Semak kerja anda: jalankan aplikasi dan borang kelihatan biasa sahaja — tepat seperti dimaksudkan: penggayaan masih di hadapan. Tekan Tab: fokus bergerak melalui setiap kawalan, label diumumkan dan penghantaran berfungsi. Tingkah laku sudah siap; rupanya milik anda dan itu seterusnya.

Langkah 4 — Gayakan

Segala-galanya di atas dipaparkan sebagai struktur tulen, sedia untuk gaya anda. Gayakan cangkuk kelas — .button, .text-input, .label, .field — dalam helaian gaya global anda, atau pautkan tema siap pakai dalam app.html: 

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

Pelarasan bagi setiap tika dilalui melalui class prop, yang ditambah pada cangkuk asas: <Button class="wide"> memaparkan class="button wide".

Langkah 5 — Lihat semuanya berfungsi

Aplikasi contoh SvelteKit ialah katalog yang sama sepenuhnya digayakan, dengan demo langsung, ujian e2e Playwright dan garis dasar kebolehcapaian 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

Langkah seterusnya

Ada soalan di sepanjang jalan? halaman bantuan penuh dengan jawapan — dan jika sesuatu langkah boleh dijelaskan lagi, beritahu kami dan kami dengan senang hati akan memperbaiki tutorial.