Lily Design System™

Samouczek Svelte

Biblioteka Svelte Lily jest implementacją kanoniczną: runy Svelte 5, typowane propsy, rozsmarowywanie pozostałych propsów i wiązanie dwukierunkowe z bind:value.

Co zbudujesz

Mały formularz kontaktowy — pole z etykietą, przycisk wysyłania, wiązanie dwukierunkowe, prawdziwe działanie klawiatury i czytnika ekranu — najpierw surowy, potem ostylowany, w około 10 minut.

Zanim zaczniesz

Potrzebujesz gita, Node 22 lub nowszego i pnpm 10 lub nowszego. Dowolny projekt Svelte 5 się nadaje — świeża npx sv create aplikacja wystarczy.

Krok 1 — Pobierz 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

Komponenty znajdują się w src/lib/components/{Name}/, po jednym katalogu na komponent z plikiem .svelte , jego testami, story i dokumentacją obok siebie. Skopiuj potrzebne katalogi do aplikacji albo zależ od repozytorium i importuj bezpośrednio.

Krok 2 — Twój pierwszy komponent

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

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

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

Renderuje <button class="button" type="button">. Propsy są typowane: type, disabled, pressed (renderuje aria-pressed (renderuje label ( aria-label dla przycisków przełączanych),

Krok 3 — Złóż mały formularz

<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 przyjmuje widoczną label jako własny props zamiast zagnieżdżonego komponentu etykiety — przekaż ją raz, na Fieldoraz TextInputz label dostarcza dostępną nazwę. TextInput's value do nadpisywania), a każdy dodatkowy atrybut jest rozsmarowywany na element główny. $bindable jest propsem bind:value rune, więc

Zweryfikowano 2026-08-29: daje ci wiązanie dwukierunkowe od razu. svelte/server dokładnie ten fragment został skompilowany przez <label for> i sprawdzony pod kątem jednej, poprawnie powiązanej etykiety Label wewnątrz Field— wcześniejszy szkic zagnieżdżał osobny dwie etykiety (jedną pustą), ponieważ Field już renderuje własną z wejścia label wewnątrz, co renderowało Złożona trasa formularza kontaktowego to ten sam wzorzec, sprawdzony prawdziwymi testami e2e i axe.

Sprawdź swoją pracę: uruchom aplikację, a formularz wygląda surowo — dokładnie tak, jak zamierzono: stylowanie jest jeszcze przed nami. Naciśnij Tab: fokus przechodzi przez każdą kontrolkę, etykieta jest odczytywana, a wysyłanie działa. Zachowanie jest gotowe; wygląd należy do ciebie i jest następnym krokiem.

Krok 4 — Ostyluj go

Wszystko powyżej renderuje się jako czysta struktura, gotowa na twoje style. Ostyluj haczyki klas — .button, .text-input, .label, .field — w globalnym arkuszu stylów lub podlinkuj gotowy motyw w app.html: 

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

Dostosowania dla pojedynczej instancji przechodzą przez class props, który dopisuje się do haczyka bazowego: <Button class="wide"> renderuje class="button wide".

Krok 5 — Zobacz, jak to wszystko działa

Aplikacja przykładowa SvelteKit to ten sam katalog w pełni ostylowany, z demami na żywo, testami Playwright e2e i punktem odniesienia dostępności 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

Następne kroki

Pytania po drodze? Strona pomocy jest pełna odpowiedzi — a jeśli jakiś krok mógłby być jaśniejszy, daj nam znać a chętnie ulepszymy samouczek.