Lily Design System™

Koyarwar Svelte

Ɗakin karatun Svelte na Lily shi ne aiwatarwa ta asali: runes na Svelte 5, props masu rubutu, yaɗa sauran props, da ɗaurin hanyoyi biyu da bind:value.

Abin da za ka gina

Ƙaramin fom na tuntuɓa — fili mai lakabi, maɓallin aikawa, ɗaurin hanyoyi biyu, ainihin halayyar maɓallan rubutu da na'urar karanta allo — da farko ba tare da tsari ba, sannan da tsari, cikin kusan mintuna 10.

Kafin ka fara

Kana buƙatar git, Node 22 ko sabo, da pnpm 10 ko sabo. Kowane aikin Svelte 5 yana aiki — sabon npx sv create app ya isa.

Mataki na 1 — Ɗauki lambar

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

Abubuwan suna cikin src/lib/components/{Name}/, kundin adireshi ɗaya ga kowane abu mai fayil ɗin .svelte , gwaje-gwajensa, story da takardunsa tare. Kwafi kundin adireshin da kake buƙata zuwa app ɗinka, ko dogara da ma'ajiyar ka shigo kai tsaye.

Mataki na 2 — Abu na farko naka

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

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

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

Yana nuna <button class="button" type="button">. Props suna da rubutu: type, disabled, pressed (yana nuna aria-pressed (yana nuna label ( aria-label ga maɓallan sauyawa),

Mataki na 3 — Haɗa ƙaramin fom

<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 yana ɗaukar label a matsayin prop nasa maimakon abin lakabi da aka saka a ciki — ka ba shi sau ɗaya, a kan Fieldda TextInputmai dacewa na label yana ba da suna mai sauƙin isa. TextInput's value don gyara), kuma kowace ƙarin sifa tana yaɗuwa a kan tushe. $bindable prop ne na bind:value rune, don haka

An tabbatar a 2026-08-29: yana ba ka ɗaurin hanyoyi biyu nan take. svelte/server an haɗa ainihin wannan gutsuren ta <label for> kuma an duba shi don lakabi ɗaya tilo, da aka haɗa daidai Label a cikin Field— wani daftarin da ya gabata ya saka lakabi biyu (ɗaya fanko) saboda Field tuni yana nuna nasa daga shigarwar label daban a ciki, wanda ya nuna Hanyar fom ɗin tuntuɓa da aka haɗa tsari ɗaya ne, wanda aka gwada da ainihin gwaje-gwajen e2e da axe.

Duba aikinka: gudanar da app ɗin kuma fom ɗin yana kama da maras tsari — daidai kamar yadda aka nufa: tsarin yana nan gaba. Danna Tab: mayar da hankali yana ratsa kowane abin sarrafawa, ana sanar da lakabin, kuma aikawa yana aiki. An gama halayyar; kamannin naka ne kuma shi ne mataki na gaba.

Mataki na 4 — Ba shi tsari

Komai da ke sama ana zana shi a matsayin tsari tsantsa, a shirye don salonka. Ba ƙugiyoyin aji tsari — .button, .text-input, .label, .field — a takardar salonka ta duniya, ko haɗa jigon da aka shirya a cikin app.html: 

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

Gyare-gyare ga kowane misali suna ratsa class prop, wanda ake ƙara shi zuwa ƙugiyar tushe: <Button class="wide"> yana nuna class="button wide".

Mataki na 5 — Kalli komai yana aiki

App ɗin misali na SvelteKit shi ne kundin guda ɗaya da cikakken tsari, tare da nunin kai tsaye, gwaje-gwajen Playwright e2e da tushen sauƙin isa na 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

Matakai na gaba

Tambayoyi a hanya? Shafin taimako cike yake da amsoshi — kuma idan wani mataki zai iya zama mafi bayyana, gaya mana kuma za mu gyara koyarwar da farin ciki.