Vodnik za Svelte — Lily Design System

Kaj boste ustvarili

Majhen kontaktni obrazec — polje z oznako, gumb za pošiljanje, dvosmerna vezava, resnično vedenje tipkovnice in bralnika zaslona — najprej gol, nato oblikovan, v približno 10 minutah.

Preden začnete

Potrebujete git, Node 22 ali novejši in pnpm 10 ali novejši. Primeren je vsak projekt Svelte 5 — povsem nova npx sv create aplikacija zadostuje.

Korak 1 — Pridobite kodo

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 so v src/lib/components/{Name}/, ena mapa na komponento z datoteko .svelte , njenimi testi, storyji in dokumentacijo drug ob drugem. Kopirajte potrebne mape v svojo aplikacijo ali se zanesite na repozitorij in uvažajte neposredno.

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>

Izriše <button class="button" type="button">. Propi so tipizirani: type, disabled, pressed (izriše aria-pressed (izriše label ( aria-label za preklopne gumbe),

Korak 3 — Sestavite majhen obrazec

<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 sprejme vidno label kot lasten prop namesto gnezdene komponente oznake — posredujte jo enkrat, pri Fieldin TextInputiz label zagotovi dostopno ime. TextInput's value za preglasitev), vsak dodaten atribut pa se razprši na koren. $bindable je prop bind:value rune, zato

Preverjeno 2026-08-29: vam takoj da dvosmerno vezavo. svelte/server natanko ta izrezek je bil preveden prek <label for> in preverjen na eno samo, pravilno povezano oznako Label znotraj Field— prejšnji osnutek je gnezdil ločen dve oznaki (eno prazno), ker Field že izriše svojo iz vhoda label znotraj, kar je izrisalo Sestavljena pot kontaktnega obrazca je isti vzorec, preizkušen z resničnimi testi e2e in axe.

Preverite svoje delo: zaženite aplikacijo in obrazec je videti gol — natanko kot je bilo načrtovano: oblikovanje šele sledi. Pritisnite Tab: fokus gre skozi vsak kontrolnik, oznaka se izgovori in pošiljanje deluje. Vedenje je končano; videz je vaš in je naslednji korak.

Korak 4 — Oblikujte ga

Vse zgoraj se izriše kot čista struktura, pripravljena na vaše sloge. Oblikujte razredne kavlje — .button, .text-input, .label, .field — v svoji globalni slogovni datoteki ali povežite že pripravljeno temo v app.html:

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

Prilagoditve za posamezno instanco gredo prek class propa, ki se doda osnovnemu kavlju: <Button class="wide"> izriše class="button wide".

Korak 5 — Poglejte, kako vse deluje

Vzorčna aplikacija SvelteKit je isti katalog povsem oblikovan, z živimi predstavitvami, testi Playwright e2e in izhodiščem dostopnosti 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

Naslednji koraki

Teme — preklapljanje med izvajanjem s pomočnikom theme-picker za Svelte.
Pomočniki za nastavitve — jezik in velikost besedila.
Katalog komponent — lastnosti, ARIA in tipkovnica za vsako komponento.

Vprašanja na poti? Stran s pomočjo je polna odgovorov — in če bi bil kakšen korak lahko jasnejši, sporočite nam in vodnik bomo z veseljem izboljšali.