Návod pre Svelte — Lily Design System

Čo vytvoríte

Malý kontaktný formulár — pole s popisom, tlačidlo odoslať, obojsmerná väzba, skutočné správanie klávesnice a čítačky obrazovky — najprv holý, potom ostylovaný, približne za 10 minút.

Skôr než začnete

Potrebujete git, Node 22 alebo novší a pnpm 10 alebo novší. Hodí sa akýkoľvek projekt Svelte 5 — stačí nová npx sv create aplikácia.

Krok 1 — Získajte kód

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 sú v src/lib/components/{Name}/, jeden adresár na komponent so súborom .svelte , jeho testami, story a dokumentáciou vedľa seba. Skopírujte potrebné adresáre do svojej aplikácie, alebo sa na repozitári závislite a importujte priamo.

Krok 2 — Váš prvý komponent

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

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

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

Vykresľuje <button class="button" type="button">. Props sú typované: type, disabled, pressed (vykresľuje aria-pressed (vykresľuje label ( aria-label pre prepínacie tlačidlá),

Krok 3 — Zložte malý formulár

<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 prijíma viditeľný label ako vlastný prop namiesto vnoreného komponentu popisu — odovzdajte ho raz, pri Fielda TextInputz label poskytne prístupný názov. TextInput's value na prepísanie) a akýkoľvek ďalší atribút sa rozprestrie na koreň. $bindable je prop bind:value rune, takže

Overené 2026-08-29: vám hneď dáva obojsmernú väzbu. svelte/server presne táto ukážka bola skompilovaná cez <label for> a skontrolovaná na jediný, správne prepojený popis Label vnútri Field— skorší koncept vnáral samostatné dva popisy (jeden prázdny), pretože Field už vykresľuje svoj vlastný zo vstupu label dovnútra, čo vykreslilo Zložená trasa kontaktného formulára je rovnaký vzor, preverený skutočnými testami e2e a axe.

Skontrolujte svoju prácu: spustite aplikáciu a formulár vyzerá holo — presne podľa zámeru: štýlovanie ešte len príde. Stlačte Tab: fokus prechádza každým ovládacím prvkom, popis sa oznamuje a odoslanie funguje. Správanie je hotové; vzhľad je váš a je ďalším krokom.

Krok 4 — Ostylujte ho

Všetko vyššie sa vykresľuje ako čistá štruktúra, pripravená na vaše štýly. Ostylujte triedne háčiky — .button, .text-input, .label, .field — vo svojej globálnej štýlovej šablóne, alebo pripojte hotovú tému v app.html:

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

Úpravy pre jednotlivú inštanciu prechádzajú cez class prop, ktorý sa pripojí k základnému háčiku: <Button class="wide"> vykresľuje class="button wide".

Krok 5 — Pozrite sa, ako to celé funguje

Ukážková aplikácia SvelteKit je ten istý katalóg plne ostylovaný, so živými ukážkami, testami Playwright e2e a základnou líniou prístupnosti 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

Ďalšie kroky

Témy — prepínanie za behu pomocníkom theme-picker pre Svelte.
Pomocníci pre predvoľby — jazyk a veľkosť textu.
Katalóg komponentov — vlastnosti, ARIA a klávesnica pre každý komponent.

Otázky po ceste? Stránka pomocníka je plná odpovedí — a ak by niektorý krok mohol byť jasnejší, dajte nám vedieť a návod radi vylepšíme.