Svelte oktatóanyag — Lily Design System

Mit fogsz építeni

Egy kis kapcsolatfelvételi űrlap — címkézett mező, küldés gomb, kétirányú kötés, valódi billentyűzet- és képernyőolvasó-viselkedés — először csupaszon, aztán stílusosan, nagyjából 10 perc alatt.

Mielőtt elkezdenéd

Szükséged van gitre, Node 22-re vagy újabbra és pnpm 10-re vagy újabbra. Bármelyik Svelte 5 projekt megfelel — egy vadonatúj npx sv create alkalmazás is elég.

1. lépés — Szerezd meg a kódot

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

A komponensek itt vannak: src/lib/components/{Name}/, komponensenként egy könyvtár a .svelte fájllal, a tesztjeivel, a story-jaival és a dokumentációjával egymás mellett. Másold a szükséges könyvtárakat az alkalmazásodba, vagy függj a tárolótól, és importálj közvetlenül.

2. lépés — Az első komponensed

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

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

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

Ezt rendereli: <button class="button" type="button">. A propok típusosak: type, disabled, pressed (ezt rendereli: aria-pressed (ezt rendereli: label (egy aria-label a kapcsológombokhoz),

3. lépés — Állíts össze egy kis űrlapot

<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 a látható label a saját propjaként beágyazott címkekomponens helyett — add át egyszer, a Fieldés TextInputa label biztosítja a hozzáférhető nevet. TextInput's value felülíráshoz), és minden további attribútum a gyökérre szóródik. $bindable egy bind:value rune prop, így a

Ellenőrizve 2026-08-29: azonnal kétirányú kötést ad. svelte/server pontosan ez a kódrészlet le lett fordítva ezzel: <label for> és ellenőrizve lett egyetlen, helyesen kapcsolt címkére Label belül a Field— egy korábbi vázlat külön két címkét renderelt (az egyik üres), mert a Field már magától rendereli a sajátját a label ágyazott bele, ami ezt renderelte: Az összeállított kapcsolatfelvételi űrlap útvonala ugyanez a minta, valódi e2e- és axe-tesztekkel kipróbálva.

Ellenőrizd a munkádat: indítsd el az alkalmazást, és az űrlap csupasznak látszik — pontosan úgy, ahogy szántuk: a stílus még hátravan. Nyomd meg a Tabbillentyűt: a fókusz végigmegy minden vezérlőn, a címkét bemondja, és a küldés működik. A viselkedés kész; a megjelenés a tiéd, és a következő lépés.

4. lépés — Stílus hozzá

Minden fent tiszta szerkezetként renderelődik, készen a stílusaidra. Stílusozd az osztálykampókat — .button, .text-input, .label, .field — a globális stíluslapodban, vagy hivatkozz egy kész témára itt: app.html:

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

A példányonkénti finomhangolások a class propon keresztül mennek, amely hozzáfűződik az alapkampóhoz: <Button class="wide"> ezt rendereli: class="button wide".

5. lépés — Nézd meg, ahogy az egész működik

A SvelteKit példaalkalmazás ugyanez a katalógus teljesen stílusosan, élő demókkal, Playwright e2e tesztekkel és axe-core akadálymentességi alapvonallal:

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

További lépések

Témák — váltás futásidőben a Svelte theme-picker segédjével.
Beállítási segédek — nyelv és szövegméret.
Komponenskatalógus — tulajdonságok, ARIA és billentyűzet komponensenként.

Kérdésed akad útközben? A súgóoldal tele van válaszokkal — és ha egy lépés érthetőbb lehetne, szólj nekünk és szívesen javítjuk az oktatóanyagot.