Lily Design System™

Vodič za Svelte

Lilyna Svelte biblioteka je kanonska implementacija: Svelte 5 rune, tipizirani propovi, rasipanje preostalih propova i dvosmjerno vezivanje s bind:value.

Što ćete izraditi

Mali kontaktni obrazac — polje s oznakom, gumb za slanje, dvosmjerno vezivanje, stvarno ponašanje tipkovnice i čitača zaslona — najprije golo, zatim stilizirano, za otprilike 10 minuta.

Prije nego počnete

Trebaju vam git, Node 22 ili noviji i pnpm 10 ili noviji. Odgovara bilo koji projekt Svelte 5 — dovoljna je potpuno nova npx sv create aplikacija.

Korak 1 — Preuzmite 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

Komponente se nalaze u src/lib/components/{Name}/, po jedan direktorij po komponenti s datotekom .svelte , njezinim testovima, storyjima i dokumentacijom jedno uz drugo. Kopirajte potrebne direktorije u svoju aplikaciju ili ovisite o repozitoriju i uvozite izravno.

Korak 2 — Vaša prva komponenta

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

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

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

Iscrtava <button class="button" type="button">. Propovi su tipizirani: type, disabled, pressed (iscrtava aria-pressed (iscrtava label ( aria-label za preklopne gumbe),

Korak 3 — Sastavite mali obrazac

<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 prima vidljivu label kao vlastiti prop umjesto ugniježđene komponente oznake — proslijedite je jednom, na Fieldi TextInputiz label daje pristupačno ime. TextInput's value za nadjačavanje), a svaki dodatni atribut raspršuje se na korijen. $bindable je prop bind:value rune, pa

Provjereno 2026-08-29: vam odmah daje dvosmjerno vezivanje. svelte/server upravo je taj isječak kompiliran preko <label for> i provjeren na jednu, ispravno povezanu oznaku Label unutar Field— raniji nacrt ugnijezdio je zasebnu dvije oznake (jednu praznu) jer Field već iscrtava vlastitu iz ulaza label unutra, što je iscrtalo Složena ruta kontaktnog obrasca isti je uzorak, isproban stvarnim e2e i axe testovima.

Provjerite svoj rad: pokrenite aplikaciju i obrazac izgleda golo — točno kako je zamišljeno: stiliziranje tek slijedi. Pritisnite Tab: fokus prolazi kroz svaku kontrolu, oznaka se izgovara i slanje radi. Ponašanje je gotovo; izgled je vaš i sljedeći je korak.

Korak 4 — Stilizirajte ga

Sve gore iscrtava se kao čista struktura, spremna za vaše stilove. Stilizirajte klasne kuke — .button, .text-input, .label, .field — u svojoj globalnoj stilskoj tablici, ili povežite gotovu temu u app.html: 

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

Prilagodbe po instanci idu preko class propa, koji se dodaje osnovnoj kuki: <Button class="wide"> iscrtava class="button wide".

Korak 5 — Pogledajte kako sve radi

Primjer aplikacija SvelteKit isti je katalog potpuno stiliziran, sa živim demonstracijama, Playwright e2e testovima i axe-core polaznom linijom pristupačnosti: 

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-sveltekit-examples
pnpm install && pnpm run dev

Sljedeći koraci

Pitanja usput? Stranica pomoći puna je odgovora — a ako neki korak može biti jasniji, javite nam i rado ćemo poboljšati vodič.