Lily Design System™

Tutorja tas-Svelte

Il-librerija Svelte ta' Lily hija l-implimentazzjoni kanonika: runes ta' Svelte 5, props tipizzati, firxa tal-props li jifdal u rbit fiż-żewġ direzzjonijiet ma' bind:value.

X'se tibni

Formola żgħira ta' kuntatt — qasam b'tikketta, buttuna biex tibgħat, rbit fiż-żewġ direzzjonijiet, mġiba vera tat-tastiera u tal-qarrej tal-iskrin — l-ewwel għarwiena, imbagħad bi stil, f'madwar 10 minuti.

Qabel ma tibda

Għandek bżonn git, Node 22 jew iktar ġdid, u pnpm 10 jew iktar ġdid. Kwalunkwe proġett Svelte 5 jaħdem — app ġdida npx sv create tkun biżżejjed.

Pass 1 — Ġib il-kodiċi

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

Il-komponenti jinsabu fi src/lib/components/{Name}/, direttorju wieħed għal kull komponent bil-fajl .svelte , it-testijiet, l-istories u d-dokumentazzjoni tiegħu maġenbu. Ikkopja d-direttorji li teħtieġ fl-app tiegħek, jew dipendi mir-repożitorju u importa direttament.

Pass 2 — L-ewwel komponent tiegħek

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

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

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

Jirrendi <button class="button" type="button">. Il-props huma tipizzati: type, disabled, pressed (jirrendi aria-pressed (jirrendi label ( aria-label għal buttuni ta' tibdil),

Pass 3 — Ikkomponi formola żgħira

<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 jieħu l- label bħala prop tiegħu stess minflok komponent ta' tikketta mdaħħal — għaddiha darba, fuq Fieldu TextInputkorrispondenti ta' label jipprovdi l-isem aċċessibbli. TextInput's value biex tissostitwixxi), u kwalunkwe attribut żejjed jinfirex fuq l-għerq. $bindable huwa prop bind:value rune, għalhekk

Ivverifikat fl-2026-08-29: jagħtik rbit fiż-żewġ direzzjonijiet minnufih. svelte/server dan is-snippet eżatt ġie kkompilat permezz ta' <label for> u ċċekkjat għal tikketta waħda biss, marbuta sew Label ġewwa Field— abbozz preċedenti daħħal żewġ tikketti (waħda vojta) għax Field diġà jirrendi tiegħu stess mill-input label separat ġewwa, li rrendi Ir-rotta komposta tal-formola ta' kuntatt hija l-istess mudell, ittestjat b'testijiet e2e u axe veri.

Iċċekkja x-xogħol tiegħek: mexxi l-app u l-formola tidher għarwiena — eżattament kif intenzjonat: l-istil għad irid jiġi. Agħfas Tab: il-focus jgħaddi minn kull kontroll, it-tikketta tiġi mħabbra u l-ibgħat jaħdem. Il-mġiba lesta; id-dehra hija tiegħek u hija l-pass li jmiss.

Pass 4 — Agħtiha stil

Kollox hawn fuq jirrendi bħala struttura pura, lesta għall-istili tiegħek. Agħti stil lill-ganċijiet tal-klassi — .button, .text-input, .label, .field — fl-istylesheet globali tiegħek, jew evita tema lesta fi app.html: 

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

Aġġustamenti għal kull istanza jgħaddu permezz tal-prop class , li jiżdied mal-ganċ bażi: <Button class="wide"> jirrendi class="button wide".

Pass 5 — Ara kollox jaħdem

L-app eżempju SvelteKit hija l-istess katalogu bi stil sħiħ, b'dimostrazzjonijiet ħajjin, testijiet Playwright e2e u linja bażi ta' aċċessibbiltà 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

Passi li jmiss

Mistoqsijiet matul it-triq? Il-paġna tal-għajnuna hija mimlija tweġibiet — u jekk pass jista' jkun iktar ċar, għidilna u nħossuna kuntenti ntejbu t-tutorja.