Lily Design System™

Teagasc Svelte

Is é leabharlann Svelte Lily an cur i bhfeidhm canónach: runes Svelte 5, props clóscríofa, scaipeadh na bprops eile agus ceangal dhá-bhealach le bind:value.

An rud a thógfaidh tú

Foirm theagmhála bheag — réimse le lipéad, cnaipe cur isteach, ceangal dhá-bhealach, fíor-iompar méarchláir agus léitheora scáileáin — nocht ar dtús, ansin stíl-chóirithe, i thart ar 10 nóiméad.

Sula dtosaíonn tú

Tá git, Node 22 nó níos nuaí, agus pnpm 10 nó níos nuaí ag teastáil uait. Oibríonn aon tionscadal Svelte 5 — is leor app úrnua npx sv create .

Céim 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

Tá na comhpháirteanna i src/lib/components/{Name}/, eolaire amháin in aghaidh na comhpháirte leis an gcomhad .svelte , a thástálacha, a scéalta agus a dhoiciméadú taobh le taobh. Cóipeáil na heolairí atá ag teastáil isteach i d'app, nó bí ag brath ar an stóras agus iompórtáil go díreach.

Céim 2 — Do chéad chomhpháirt

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

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

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

Rindreálann <button class="button" type="button">. Tá na props clóscríofa: type, disabled, pressed (rindreálann aria-pressed (rindreálann label ( aria-label do chnaipí scoránaithe),

Céim 3 — Cuir foirm bheag le 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 glacann sé leis an label mar phrop dá chuid féin in ionad comhpháirt lipéid neadaithe — pas é uair amháin, ar Fieldagus TextInputcomhfhreagrach ó label soláthraíonn an t-ainm inrochtana. TextInput's value chun sárú), agus scaipeann aon aitreabúid bhreise ar an bhfréamh. $bindable is prop bind:value rune é, mar sin

Fíoraithe 2026-08-29: tugann sé ceangal dhá-bhealach duit láithreach. svelte/server tiomsaíodh an blúire cruinn seo trí <label for> agus seiceáladh é le haghaidh lipéad amháin, nasctha i gceart Label taobh istigh de Field— chuir dréacht roimhe sin dhá lipéad (ceann amháin folamh) mar go rindreálann Field a cheann féin cheana ón ionchur label ar leith taobh istigh, rud a rindreáil An bealach comhshuite foirm teagmhála an patrún céanna, tástáilte le fíor-thástálacha e2e agus axe.

Seiceáil d'obair: rith an app agus tá an fhoirm le feiceáil nocht — go díreach mar a bhí beartaithe: tá an stíliú fós le teacht. Brúigh Tab: gluaiseann an fócas trí gach rialú, fógraítear an lipéad agus oibríonn an cur isteach. Tá an t-iompar déanta; is leatsa an cuma agus is é an chéad chéim eile é.

Céim 4 — Stíligh é

Rindreáiltear gach rud thuas mar struchtúr glan, réidh do do stíleanna. Stíligh na crúcaí aicme — .button, .text-input, .label, .field — i do bhileog stíle ghlobhal, nó nasc téama réamhdhéanta in app.html: 

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

Téann coigeartuithe in aghaidh an chása tríd an class prop, a chuirtear leis an gcrúca bunúsach: <Button class="wide"> rindreálann class="button wide".

Céim 5 — Féach air ag obair ar fad

App samplach SvelteKit an catalóg chéanna go hiomlán stíl-chóirithe, le taispeántais bheo, tástálacha Playwright e2e agus bonnlíne inrochtaineachta 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 chéad chéimeanna eile

Ceisteanna ar an mbealach? Tá an leathanach cabhrach lán de fhreagraí — agus más féidir céim a dhéanamh níos soiléire, inis dúinn agus déanfaimid an teagasc a fheabhsú go sásta.