Lily Design System™

Tutorial sa Svelte

Ang Svelte library ng Lily ang canonical na implementasyon: mga rune ng Svelte 5, typed na prop, rest-prop spread, at two-way binding gamit ang bind:value.

Ang bubuuin mo

Isang maliit na contact form — input na may label, submit button, two-way binding, tunay na gawi ng keyboard at screen reader — una ay hubad, pagkatapos ay may istilo, sa humigit-kumulang 10 minuto.

Bago ka magsimula

Kailangan mo ng git, Node 22 o mas bago, at pnpm 10 o mas bago. Gumagana ang anumang proyektong Svelte 5 — sapat na ang bagong npx sv create app.

Hakbang 1 — Kunin ang code

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

Nakatira ang mga component sa src/lib/components/{Name}/, isang direktoryo bawat component na may .svelte file, ang mga test, story, at dokumento nito sa magkakatabi. Kopyahin ang mga direktoryong kailangan mo sa iyong app, o umasa sa repo at mag-import nang direkta.

Hakbang 2 — Ang una mong component

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

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

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

Nagre-render ng <button class="button" type="button">. Typed ang mga prop: type, disabled, pressed (nagre-render ng aria-pressed para sa mga toggle button), label (isang aria-label override), at anumang dagdag na attribute ay kumakalat sa root.

Hakbang 3 — Bumuo ng maliit na form

<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 ay kumukuha ng nakikitang label bilang sarili nitong prop sa halip na nested na label component — ipasa ito nang isang beses, sa Field, at TextInputsa label ay nagbibigay ng accessible na pangalan. TextInput's value ay isang $bindable rune prop, kaya ang bind:value ay nagbibigay agad sa iyo ng two-way binding.

Napatunayan noong 2026-08-29: ang eksaktong snippet na ito ay na-compile sa pamamagitan ng svelte/server at sinuri para sa isang tama ang link na <label for> — nag-nest ang naunang draft ng hiwalay na Label sa loob ng Field, na nagre-render ng dalawang label (isang walang laman) dahil Field ay nagre-render na ng sarili nito mula sa label prop. Ang composed na ruta ng contact-form ay parehong pattern, sinubukan ng tunay na e2e at axe na pagsusuri.

Suriin ang gawa mo: patakbuhin ang app at mukhang payak ang form — eksakto ayon sa layunin: ang istilo ay nasa unahan pa. Pindutin ang Tab: gumagalaw ang focus sa bawat kontrol, naba-balita ang label, at gumagana ang pagsumite. Tapos na ang gawi; sa iyo ang hitsura at iyon ang susunod.

Hakbang 4 — Bigyan ng istilo

Lahat ng nasa itaas ay nagre-render bilang purong istruktura, handa para sa iyong mga istilo. Bigyan ng istilo ang mga class hook — .button, .text-input, .label, .field — sa iyong global na stylesheet, o mag-link ng handa nang tema sa app.html: 

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

Dumadaan ang mga pagsasaayos bawat instance sa class prop, na idinurugtong sa base hook: <Button class="wide"> ay nagre-render ng class="button wide".

Hakbang 5 — Tingnan ang lahat na gumagana

Ang SvelteKit na halimbawang app ay ang parehong catalog na ganap na may istilo, na may live na demo, Playwright e2e na pagsusuri, at axe-core accessibility baseline: 

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

Mga susunod na hakbang

May mga tanong habang nasa daan? Ang pahina ng tulong ay puno ng mga sagot — at kung maaaring maging mas malinaw ang isang hakbang, sabihin sa amin at masaya naming pagbubutihin ang tutorial.