Lily Design System™

Oideachadh Svelte

’S e leabharlann Svelte aig Lily an cur an gnìomh canonta: runes Svelte 5, props le seòrsachadh, sgaoileadh rest-prop, agus ceangal dà-shlighe le bind:value.

Na thogas tu

Foirm fios-thugainn bheag — in-chur le leubail, putan cur-a-steach, ceangal dà-shlighe, giùlan clàr-iuchrach is leughadair-sgrìn fìor — an toiseach lom, an uairsin le stoidhle, ann an timcheall air 10 mionaidean.

Mus tòisich thu

Feumaidh tu git, Node 22 no nas ùire, agus pnpm 10 no nas ùire. Obraichidh pròiseact Svelte 5 sam bith — tha npx sv create tagradh ùr ceart gu leòr.

Ceum 1 — Faigh an còd

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

Tha na co-phàirtean a’ fuireach ann an src/lib/components/{Name}/, aon eòlaire airson gach co-phàirt leis an fhaidhle .svelte aige, na deuchainnean, na stories agus na sgrìobhainnean ri thaobh a chèile. Dèan lethbhreac dhe na h-eòlairean a tha a dhìth ort dhan tagradh agad, no biodh an stòr na eisimeileachd agus ion-phortaich gu dìreach.

Ceum 2 — A’ chiad cho-phàirt agad

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

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

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

A’ reandaradh <button class="button" type="button">. Tha na props air an seòrsachadh: type, disabled, pressed (a’ reandaradh aria-pressed airson putanan toglaidh), label ( aria-label tar-sgrìobhadh), agus bidh buadh a bharrachd sam bith a’ sgaoileadh air an fhreumh.

Ceum 3 — Cuir foirm bheag ri chèile

<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’ gabhail an label mar a prop fhèin seach co-phàirt leubail neadaichte — thoir seachad e aon turas, air Field, agus TextInputa tha a’ maidseadh label a’ solarachadh an ainm so-ruigsinneach. TextInput's value na $bindable prop rune, agus mar sin bind:value bheir e ceangal dà-shlighe dhut sa bhad.

Dearbhte 2026-08-29: chaidh an criomag cheart seo a thrusadh tro svelte/server agus a sgrùdadh airson aon <label for> ceangailte gu ceart — bha dreachd na bu thràithe a’ neadachadh Label am broinn Fieldair leth, a reandaradh dà leubail (fear falamh) oir bidh Field mu thràth a’ reandaradh a fhir fhèin bhon label prop. An slighe measgaichte foirm fios-thugainn an aon phàtran, air a chleachdadh le deuchainnean e2e is axe fìor.

Dèan cinnteach air d’ obair: ruith an tagradh agus tha an fhoirm a’ coimhead lom — dìreach mar a bha dùil: tha an stoidhle fhathast romhainn. Brùth Tab: bidh am fòcas a’ gluasad tro gach smachd, tha an leubail air ainmeachadh, agus obraichidh cur-a-steach. Tha an giùlan deiseil; is leatsa an coltas, agus is e an ath rud.

Ceum 4 — Cuir stoidhle air

Tha a h-uile càil gu h-àrd a’ reandaradh mar structar glan, deiseil airson do stoidhlean. Cuir stoidhle air na crochaidhean clas — .button, .text-input, .label, .field — anns a’ bhileag-stoidhle chruinneil agad, no ceangail ùrlar deiseil ann an app.html: 

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

Bidh mion-atharrachaidhean airson gach eisimpleir a’ dol tron class prop, a thèid a chur ris a’ chrochadh bhunaiteach: <Button class="wide"> a’ reandaradh class="button wide".

Ceum 5 — Faic a h-uile càil ag obair

Tha an tagradh eisimpleir SvelteKit an aon chatalog làn-stoidhle, le taisbeanaidhean beò, deuchainnean Playwright e2e, agus bun-loidhne so-ruigsinneachd 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

Na ceumannan a leanas

Ceistean air an t-slighe? Tha an duilleag chuideachaidh làn fhreagairtean — agus nam b’ urrainn ceum a bhith nas soilleire, innis dhuinn agus nì sinn an t-oideachadh nas fheàrr le toileachas.