Mafunzo ya Svelte — Lily Design System

Utakachojenga

Fomu ndogo ya mawasiliano — pembejeo yenye lebo, kitufe cha kutuma, uunganishaji wa pande mbili, tabia halisi ya kibodi na kisomaji skrini — kwanza bila mapambo, kisha ikiwa na mapambo, kwa takriban dakika 10.

Kabla ya kuanza

Unahitaji git, Node 22 au zaidi, na pnpm 10 au zaidi. Mradi wowote wa Svelte 5 unafaa — mpya kabisa npx sv create programu inatosha.

Hatua ya 1 — Pata msimbo

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

Vipengele viko katika src/lib/components/{Name}/, saraka moja kwa kila kipengele ikiwa na faili ya .svelte , majaribio yake, hadithi zake, na nyaraka zake kando kwa kando. Nakili saraka unazohitaji kwenye programu yako, au tegemea hifadhi na uingize moja kwa moja.

Hatua ya 2 — Kipengele chako cha kwanza

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

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

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

Huonyesha <button class="button" type="button">. Sifa zina aina: type, disabled, pressed (huonyesha aria-pressed (huonyesha label ( aria-label kwa vitufe vya kubadili),

Hatua ya 3 — Unda fomu ndogo

<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 huchukua label kama sifa yake yenyewe badala ya kipengele cha lebo kilichowekwa ndani — ipitishe mara moja, kwenye Field, na TextInputinayolingana label hutoa jina linalofikika. TextInput's value kubatilisha), na sifa yoyote ya ziada husambaa kwenye mzizi. $bindable ni sifa ya rune ya bind:value hivyo

Imethibitishwa 2026-08-29: hukupa uunganishaji wa pande mbili mara moja. svelte/server kijisehemu hiki hasa kilikusanywa kupitia <label for> na kuthibitishwa kuwa na lebo moja tu iliyounganishwa ipasavyo Label ndani ya Field— rasimu ya awali iliweka mbili lebo (moja tupu) kwa sababu Field tayari huonyesha lebo yake yenyewe kutoka kwenye label tofauti ndani yake, ambayo iliyoonyesha Njia ya fomu ya mawasiliano iliyounganishwa ni mchoro uleule, uliojaribiwa kwa majaribio halisi ya e2e na axe.

Hakiki kazi yako: endesha programu na fomu inaonekana ya kawaida — kama ilivyokusudiwa: mapambo bado yanakuja. Bonyeza Tab: umakini husogea kwenye kila kidhibiti, lebo inatangazwa, na kutuma kunafanya kazi. Tabia imekamilika; mwonekano ni wako, na ndio unaofuata.

Hatua ya 4 — Ipambe

Kila kitu hapo juu huonyeshwa kama muundo safi, tayari kwa mitindo yako. Pamba vishikio vya darasa — .button, .text-input, .label, .field — katika karatasi yako ya mitindo ya jumla, au unganisha mandhari yaliyo tayari katika app.html:

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

Marekebisho kwa kila mfano hupitia class sifa, ambayo huongezwa kwenye kishikio cha msingi: <Button class="wide"> huonyesha class="button wide".

Hatua ya 5 — Ona kila kitu kikifanya kazi

Programu ya mifano ya SvelteKit ni orodha ileile yenye mapambo kamili, ikiwa na maonyesho ya moja kwa moja, majaribio ya Playwright e2e, na msingi wa ufikivu wa 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

Hatua zinazofuata

Mandhari — kubadili wakati wa utekelezaji kwa kisaidizi cha theme-picker cha Svelte.
Visaidizi vya mapendeleo — lugha na ukubwa wa maandishi.
Orodha ya vipengele — sifa, ARIA, na kibodi kwa kila kipengele.

Una maswali njiani? Ukurasa wa msaada umejaa majibu — na kama hatua inaweza kuwa wazi zaidi, tuambie na tutafurahi kuboresha mafunzo.