Lily Design System™

Tutorial Svelte

Pustaka Svelte Lily adalah implementasi kanonis: rune Svelte 5, props bertipe, penyebaran props sisa, dan pengikatan dua arah dengan bind:value.

Apa yang akan Anda bangun

Formulir kontak kecil — kolom berlabel, tombol kirim, pengikatan dua arah, perilaku papan ketik dan pembaca layar yang nyata — pertama polos, lalu bergaya, dalam sekitar 10 menit.

Sebelum memulai

Anda memerlukan git, Node 22 atau lebih baru, dan pnpm 10 atau lebih baru. Proyek Svelte 5 mana pun bisa — aplikasi baru npx sv create sudah cukup.

Langkah 1 — Dapatkan kodenya

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 berada di src/lib/components/{Name}/, satu direktori per komponen dengan berkas .svelte , pengujian, story, dan dokumentasinya berdampingan. Salin direktori yang Anda perlukan ke aplikasi Anda, atau bergantung pada repositori dan impor langsung.

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>

Merender <button class="button" type="button">. Props bertipe: type, disabled, pressed (merender aria-pressed (merender label (sebuah aria-label untuk tombol sakelar),

Langkah 3 — Susun formulir 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 menerima label sebagai prop-nya sendiri, bukan komponen label bersarang — teruskan sekali, pada Fielddan TextInputyang cocok dari label memberikan nama yang dapat diakses. TextInput's value untuk menimpa), dan atribut tambahan apa pun disebarkan ke akar. $bindable adalah prop bind:value rune, jadi

Diverifikasi 2026-08-29: langsung memberi Anda pengikatan dua arah. svelte/server cuplikan yang persis ini dikompilasi melalui <label for> dan diperiksa untuk satu label yang terhubung dengan benar Label di dalam Field— draf sebelumnya menyarangkan dua label (satu kosong) karena Field sudah merender labelnya sendiri dari input label terpisah di dalamnya, yang merender Rute formulir kontak gabungan adalah pola yang sama, diuji dengan pengujian e2e dan axe yang nyata.

Periksa pekerjaan Anda: jalankan aplikasi dan formulir tampak polos — persis seperti yang dimaksudkan: penataan gaya masih akan datang. Tekan Tab: fokus berpindah melalui setiap kontrol, label diumumkan, dan pengiriman berfungsi. Perilakunya selesai; tampilan adalah milik Anda dan menjadi langkah berikutnya.

Langkah 4 — Beri gaya

Semua di atas dirender sebagai struktur murni, siap untuk gaya Anda. Beri gaya pada kait kelas — .button, .text-input, .label, .field — di lembar gaya global Anda, atau tautkan tema siap pakai di app.html: 

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

Penyesuaian per instans melalui prop class , yang ditambahkan ke kait dasar: <Button class="wide"> merender class="button wide".

Langkah 5 — Lihat semuanya bekerja

Aplikasi contoh SvelteKit adalah katalog yang sama dengan gaya lengkap, dengan demo langsung, pengujian Playwright e2e, dan garis dasar aksesibilitas 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 berikutnya

Ada pertanyaan di tengah jalan? Halaman bantuan penuh jawaban — dan jika suatu langkah bisa lebih jelas, beri tahu kami dan kami dengan senang hati akan memperbaiki tutorial ini.