Lily Design System™

Svelte-kennsluefni

Svelte-safn Lily er kanónísk útfærsla: Svelte 5 runes, tegundum bundnir props, dreifing rest-prop og tvíátta binding með bind:value.

Það sem þú munt byggja

Lítið tengiliðaeyðublað — innsláttarreitur með merkimiða, sendihnappur, tvíátta binding, raunveruleg lyklaborðs- og skjálesarahegðun — fyrst ber, svo stílað, á um 10 mínútum.

Áður en þú byrjar

Þú þarft git, Node 22 eða nýrra og pnpm 10 eða nýrra. Hvaða Svelte 5 verkefni sem er virkar — nýtt npx sv create forrit dugar.

Skref 1 — Náðu í kóðann

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

Íhlutirnir eru í src/lib/components/{Name}/, ein mappa fyrir hvern íhlut með .svelte skránni, prófum hennar, stories og skjölum hlið við hlið. Afritaðu möppurnar sem þú þarft í forritið þitt, eða hafðu geymsluna sem háð og fluttu inn beint.

Skref 2 — Fyrsti íhluturinn þinn

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

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

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

Birtir <button class="button" type="button">. Propsin eru tegundabundin: type, disabled, pressed (birtir aria-pressed fyrir rofahnappa), label ( aria-label yfirskrift) og hvaða aukaeigind sem er dreifist á rótina.

Skref 3 — Settu saman lítið eyðublað

<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 tekur sýnilega label sem sinn eigin prop frekar en innfelldan merkimiðaíhlut — gefðu hann einu sinni, á Fieldog TextInputá label sér um aðgengilega heitið. TextInput's value er $bindable rune prop, svo bind:value gefur þér tvíátta bindingu strax.

Staðfest 2026-08-29: þetta nákvæma snifs var þýtt í gegnum svelte/server og athugað með tilliti til eins, rétt tengds <label for> — fyrri drög innfeldu sérstakan Label inni í Field, sem birti tvo merkimiða (annan tóman) því Field birtir þegar sinn eigin út frá label prop. Sá samsetta tengiliðaeyðublaðsleiðin er sama mynstur, prófað með raunverulegum e2e- og axe-prófum.

Athugaðu verkið: keyrðu forritið og eyðublaðið lítur einfalt út — nákvæmlega eins og ætlað er: stíllinn er enn framundan. Ýttu á Tab: fókusinn færist í gegnum hverja stýringu, merkimiðinn er lesinn upp og sending virkar. Hegðunin er tilbúin; útlitið er þitt og er næst.

Skref 4 — Stílaðu það

Allt hér að ofan birtist sem hrein uppbygging, tilbúin fyrir stílana þína. Stílaðu klasakrókana — .button, .text-input, .label, .field — í altæka stílblaðinu þínu, eða tengdu tilbúið þema í app.html: 

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

Lagfæringar fyrir hverja tilvik fara um class prop, sem bætist við grunnkrókinn: <Button class="wide"> birtir class="button wide".

Skref 5 — Sjáðu allt virka

SvelteKit dæmaforritið er sama safnið fullstílað, með lifandi sýnidæmum, Playwright e2e-prófum og axe-core aðgengisgrunnlínu: 

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

Næstu skref

  • Þemu — skipti á keyrslutíma með Svelte theme-picker hjálpartækinu.
  • Stillingahjálpartæki — tungumál og textastærð.
  • Íhlutasafn — eiginleikar, ARIA og lyklaborð fyrir hvern íhlut.

Spurningar á leiðinni? hjálparsíðan er full af svörum — og ef skref gæti verið skýrara, segðu okkur og við bætum kennsluefnið með ánægju.