Lily Design System™

Návod pro Svelte

Knihovna Svelte od Lily je kanonická implementace: runy Svelte 5, typované props, rozprostírání zbývajících props a obousměrná vazba s bind:value.

Co vytvoříte

Malý kontaktní formulář — pole se štítkem, tlačítko odeslat, obousměrná vazba, skutečné chování klávesnice a čtečky obrazovky — nejprve holý, potom ostylovaný, zhruba za 10 minut.

Než začnete

Potřebujete git, Node 22 nebo novější a pnpm 10 nebo novější. Hodí se jakýkoli projekt Svelte 5 — stačí nová npx sv create aplikace.

Krok 1 — Získejte 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 jsou v src/lib/components/{Name}/, jeden adresář na komponentu se souborem .svelte , jeho testy, story a dokumentací vedle sebe. Zkopírujte potřebné adresáře do své aplikace, nebo se na repozitáři závislejte a importujte přímo.

Krok 2 — Vaše první komponenta

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

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

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

Vykresluje <button class="button" type="button">. Props jsou typované: type, disabled, pressed (vykresluje aria-pressed (vykresluje label ( aria-label pro přepínací tlačítka),

Krok 3 — Sestavte malý formulář

<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 přijímá viditelný label jako vlastní prop místo vnořené komponenty štítku — předejte ho jednou, u Fielda TextInputz label dodá přístupný název. TextInput's value k přepsání) a jakýkoli další atribut se rozprostře na kořen. $bindable je prop bind:value rune, takže

Ověřeno 2026-08-29: vám hned dává obousměrnou vazbu. svelte/server přesně tato ukázka byla zkompilována přes <label for> a zkontrolována na jediný, správně propojený štítek Label uvnitř Field— dřívější koncept vnořoval samostatné dva štítky (jeden prázdný), protože Field už vykresluje svůj vlastní ze vstupu label dovnitř, což vykreslilo Složená trasa kontaktního formuláře je stejný vzor, prověřený skutečnými testy e2e a axe.

Zkontrolujte svou práci: spusťte aplikaci a formulář vypadá holě — přesně jak bylo zamýšleno: stylování teprve přijde. Stiskněte Tab: fokus prochází každým ovládacím prvkem, štítek se oznamuje a odeslání funguje. Chování je hotové; vzhled je váš a je další na řadě.

Krok 4 — Ostylujte ho

Vše výše se vykresluje jako čistá struktura, připravená na vaše styly. Ostylujte třídní háčky — .button, .text-input, .label, .field — v globálním stylopisu, nebo připojte hotové téma v app.html: 

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

Úpravy pro jednotlivou instanci procházejí přes class prop, který se připojí k základnímu háčku: <Button class="wide"> vykresluje class="button wide".

Krok 5 — Podívejte se, jak to celé funguje

Ukázková aplikace SvelteKit je stejný katalog plně ostylovaný, s živými ukázkami, testy Playwright e2e a základní linií pří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

Další kroky

Otázky cestou? Stránka nápovědy je plná odpovědí — a pokud by nějaký krok mohl být jasnější, dejte nám vědět a návod rádi vylepšíme.