Lily Design System™

Svelte tutoriala

Lilyren Svelte liburutegia inplementazio kanonikoa da: Svelte 5 runes, propa tipatuak, rest-prop hedapena eta bi norabideko lotura honekin: bind:value.

Zer eraikiko duzun

Harremanetarako formulario txiki bat — etiketadun sarrera, bidaltze-botoia, bi norabideko lotura, teklatu eta pantaila-irakurgailu portaera erreala — lehenik biluzik, gero estilatuta, 10 minutu inguruan.

Hasi aurretik

git, Node 22 edo berriagoa eta pnpm 10 edo berriagoa behar dituzu. Edozein Svelte 5 proiektuk balio du — berri-berria den npx sv create aplikazio bat nahikoa da.

1. pausoa — Lortu kodea

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

Osagaiak hemen bizi dira: src/lib/components/{Name}/, osagai bakoitzeko direktorio bat .svelte fitxategiarekin, bere probekin, story-ekin eta dokumentazioarekin elkarren ondoan. Kopiatu behar dituzun direktorioak zure aplikaziora, edo egin biltegiaren mendekotasun eta inportatu zuzenean.

2. pausoa — Zure lehen osagaia

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

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

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

Errendatzen du <button class="button" type="button">. Propak tipatuak dira: type, disabled, pressed (errendatzen du aria-pressed etengailu-botoietarako), label ( aria-label gainidazketa), eta atributu gehigarri oro erroan hedatzen da.

3. pausoa — Osatu formulario txiki bat

<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 etiketa ikusgarria label bere propa gisa, etiketa-osagai habiaratu gisa baino — eman behin, Field, eta TextInput-ak label -n TextInput's value $bindable rune propa da, beraz bind:value bi norabideko lotura ematen dizu berehala.

2026-08-29an egiaztatua: snippet zehatz hau honen bidez konpilatu zen svelte/server eta hau egiaztatu zen: bakarra, ongi lotua <label for> — aurreko zirriborro batek bereizita habiaratzen zuen Label -ren barruan Field, honek errendatzen zuen bi etiketa errendatzen zituen (bat hutsik) zeren Field -k jada bere etiketa errendatzen baitu label propa. Honek harremanetarako formulario konposatuaren ibilbideak patroi bera du, benetako e2e eta axe probekin erabilia.

Egiaztatu zure lana: exekutatu aplikazioa eta formularioa soila ageri da — hain zuzen nahi bezala: estiloa oraindik aurrean dago. Sakatu Tab: fokua kontrol guztietatik pasatzen da, etiketa iragartzen da eta bidalketak funtzionatzen du. Portaera prest dago; itxura zurea da eta hurrengoa da.

4. pausoa — Estilatu

Gainean dagoen guztia egitura huts gisa errendatzen da, zure estilorako prest. Estilatu klase-gakoak — .button, .text-input, .label, .field — zure estilo-orri globalean, edo lotu prest dagoen gai bat hemen: app.html: 

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

Instantzia bakoitzeko doikuntzak honen bidez doaz: class propa, oinarrizko gakoari eransten zaiona: <Button class="wide"> errendatzen du class="button wide".

5. pausoa — Ikusi dena funtzionatzen

SvelteKit adibide-aplikazioa katalogo bera da guztiz estilatuta, demo biziekin, Playwright e2e probekin eta axe-core irisgarritasun oinarri-lerroarekin: 

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

Hurrengo pausoak

Galderarik bidean? laguntza-orriak erantzunez beteta dago — eta pauso bat argiagoa izan badaiteke, esan iezaguzu eta pozik hobetuko dugu tutoriala.