Lily Design System™

Tiwtorial Svelte

Llyfrgell Svelte Lily yw'r gweithrediad canonaidd: runes Svelte 5, props teipiedig, lledaenu props gweddilliol, a rhwymo dwyffordd gyda bind:value.

Beth fyddwch chi'n ei adeiladu

Ffurflen gyswllt fach — maes â label, botwm cyflwyno, rhwymo dwyffordd, ymddygiad bysellfwrdd a darllenydd sgrin go iawn — yn noeth yn gyntaf, yna wedi'i steilio, mewn tua 10 munud.

Cyn i chi ddechrau

Mae arnoch angen git, Node 22 neu'n hwyrach, a pnpm 10 neu'n hwyrach. Mae unrhyw brosiect Svelte 5 yn gweithio — mae ap newydd sbon npx sv create yn ddigon.

Cam 1 — Cael y cod

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

Mae'r cydrannau'n byw yn src/lib/components/{Name}/, un cyfeiriadur i bob cydran gyda'r ffeil .svelte , ei phrofion, ei storïau a'i dogfennaeth ochr yn ochr. Copïwch y cyfeiriaduron sydd eu hangen arnoch i'ch ap, neu dibynnwch ar y gadwrfa a mewnforio'n uniongyrchol.

Cam 2 — Eich cydran gyntaf

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

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

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

Yn dangos <button class="button" type="button">. Mae'r props yn deipiedig: type, disabled, pressed (yn dangos aria-pressed (yn dangos label ( aria-label ar gyfer botymau toglo),

Cam 3 — Cyfansoddi ffurflen fach

<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 yn cymryd y label fel ei prop ei hun yn lle cydran label nythedig — pasiwch ef unwaith, ar Fielda TextInputcyfatebol o label yn darparu'r enw hygyrch. TextInput's value i'w ddiystyru), ac mae unrhyw briodoledd ychwanegol yn lledaenu ar y gwraidd. $bindable yn prop bind:value rune, felly mae

Gwiriwyd 2026-08-29: yn rhoi rhwymo dwyffordd i chi ar unwaith. svelte/server llunniwyd yr union ddarn hwn drwy <label for> a'i wirio am un label unigol, wedi'i gysylltu'n gywir Label y tu mewn i Field— roedd drafft cynharach yn nythu dau label (un yn wag) oherwydd bod Field eisoes yn dangos ei un ei hun o'r mewnbwn label ar wahân y tu mewn, a oedd yn rendro Y llwybr ffurflen gyswllt cyfansawdd yw'r un patrwm, wedi'i brofi gyda phrofion e2e ac axe go iawn.

Gwiriwch eich gwaith: rhedwch yr ap ac mae'r ffurflen yn edrych yn noeth — yn union fel y bwriadwyd: mae'r steilio eto i ddod. Pwyswch Tab: mae ffocws yn symud trwy bob rheolydd, caiff y label ei gyhoeddi ac mae cyflwyno'n gweithio. Mae'r ymddygiad wedi'i orffen; eich un chi yw'r olwg a dyma'r cam nesaf.

Cam 4 — Ei steilio

Mae popeth uchod yn rendro fel strwythur pur, yn barod ar gyfer eich arddulliau. Steiliwch y bachau dosbarth — .button, .text-input, .label, .field — yn eich taflen arddull fyd-eang, neu cysylltwch thema barod yn app.html: 

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

Mae addasiadau fesul enghraifft yn mynd drwy'r class prop, sy'n cael ei atodi at y bachyn sylfaenol: <Button class="wide"> yn rendro class="button wide".

Cam 5 — Ei weld yn gweithio i gyd

Ap enghreifftiol SvelteKit yw'r un catalog wedi'i steilio'n llawn, gydag arddangosiadau byw, profion Playwright e2e a llinell sylfaen hygyrchedd 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

Y camau nesaf

Cwestiynau ar y ffordd? Mae'r dudalen gymorth yn llawn atebion — ac os gellid gwneud cam yn gliriach, dywedwch wrthym a byddwn yn falch o wella'r tiwtorial.