Lily Design System™

Tutorial Svelte

Biblioteca Svelte a Lily este implementarea canonică: runes Svelte 5, props tipizate, distribuire a props rămase și legare bidirecțională cu bind:value.

Ce vei construi

Un mic formular de contact — câmp cu etichetă, buton de trimitere, legare bidirecțională, comportament real al tastaturii și al cititorului de ecran — mai întâi simplu, apoi stilizat, în aproximativ 10 minute.

Înainte să începi

Ai nevoie de git, Node 22 sau mai nou și pnpm 10 sau mai nou. Orice proiect Svelte 5 merge — o aplicație npx sv create nouă este suficientă.

Pasul 1 — Obține codul

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

Componentele se află în src/lib/components/{Name}/, un director pe componentă cu fișierul .svelte , testele, story-urile și documentația sa alături. Copiază directoarele de care ai nevoie în aplicația ta sau depinde de depozit și importă direct.

Pasul 2 — Prima ta componentă

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

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

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

Randează <button class="button" type="button">. Props sunt tipizate: type, disabled, pressed (randează aria-pressed (randează label (un aria-label pentru butoane comutatoare),

Pasul 3 — Compune un formular mic

<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 primește label ca propriul prop, în loc de o componentă etichetă imbricată — transmite-o o singură dată, pe Fieldși TextInputcorespunzător din label oferă numele accesibil. TextInput's value pentru suprascriere), iar orice atribut suplimentar este distribuit pe rădăcină. $bindable este un prop bind:value rune, deci

Verificat la 2026-08-29: îți oferă imediat legare bidirecțională. svelte/server acest fragment exact a fost compilat prin <label for> și verificat pentru o singură etichetă, legată corect Label în interiorul Field— o ciornă anterioară imbrica un două etichete (una goală) deoarece Field randează deja propria etichetă din intrarea label separat în interior, ceea ce randa Ruta compusă a formularului de contact este același tipar, exersat cu teste e2e și axe reale.

Verifică-ți munca: rulează aplicația și formularul arată simplu — exact cum era intenționat: stilizarea urmează. Apasă Tab: focalizarea trece prin fiecare control, eticheta este anunțată, iar trimiterea funcționează. Comportamentul este gata; aspectul este al tău și urmează.

Pasul 4 — Stilizează-l

Tot ce e mai sus se randează ca structură pură, gata pentru stilurile tale. Stilizează cârligele de clasă — .button, .text-input, .label, .field — în foaia ta de stil globală sau leagă o temă gata făcută în app.html: 

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

Ajustările pe instanță trec prin prop-ul class care se adaugă la cârligul de bază: <Button class="wide"> randează class="button wide".

Pasul 5 — Vezi totul funcționând

Aplicația-exemplu SvelteKit este același catalog complet stilizat, cu demonstrații live, teste Playwright e2e și o linie de bază de accesibilitate 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

Pașii următori

Întrebări pe parcurs? Pagina de ajutor este plină de răspunsuri — iar dacă un pas poate fi mai clar, spune-ne și vom îmbunătăți cu plăcere tutorialul.