Lily Design System™

Svelte-opas

Lilyn Svelte-kirjasto on kanoninen toteutus: Svelte 5 -runet, tyypitetyt propit, jäljellä olevien proppien levitys ja kaksisuuntainen sidonta bind:value.

Mitä rakennat

Pieni yhteydenottolomake — nimiöity kenttä, lähetyspainike, kaksisuuntainen sidonta, aito näppäimistö- ja ruudunlukijakäyttäytyminen — ensin paljaana, sitten tyylitellen, noin 10 minuutissa.

Ennen kuin aloitat

Tarvitset gitin, Node 22:n tai uudemman ja pnpm 10:n tai uudemman. Mikä tahansa Svelte 5 -projekti kelpaa — aivan uusi npx sv create -sovellus riittää.

Vaihe 1 — Hae koodi

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

Komponentit sijaitsevat hakemistossa src/lib/components/{Name}/, yksi hakemisto komponenttia kohden, jossa .svelte -tiedosto, sen testit, storyt ja dokumentaatio vierekkäin. Kopioi tarvitsemasi hakemistot sovellukseesi tai riipu reposta ja tuo suoraan.

Vaihe 2 — Ensimmäinen komponenttisi

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

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

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

Renderöi <button class="button" type="button">. Propit on tyypitetty: type, disabled, pressed (renderöi aria-pressed (renderöi label ( aria-label kytkinpainikkeille),

Vaihe 3 — Kokoa pieni lomake

<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 ottaa näkyvän label omana proppinaan sisäkkäisen nimiökomponentin sijaan — välitä se kerran elementille Fieldja TextInputelementistä label antaa saavutettavan nimen. TextInput's value ohittamiseen) ja mikä tahansa ylimääräinen attribuutti levitetään juureen. $bindable on bind:value -rune-prop, joten

Varmistettu 2026-08-29: antaa heti kaksisuuntaisen sidonnan. svelte/server tämä täsmällinen koodinpätkä käännettiin komennolla <label for> ja tarkistettiin yhden, oikein linkitetyn nimiön osalta Label sisällä Field— aiempi luonnos sijoitti erillisen kaksi nimiötä (toinen tyhjä), koska Field renderöi jo oman nimiönsä label sen sisään, mikä renderöi Koottu yhteydenottolomakkeen reitti on sama malli, jota on koeteltu oikeilla e2e- ja axe-testeillä.

Tarkista työsi: käynnistä sovellus, ja lomake näyttää paljaalta — juuri niin kuin on tarkoitus: tyylittely on vielä edessä. Paina Tab: kohdistus liikkuu jokaisen ohjaimen läpi, nimiö ilmoitetaan ja lähettäminen toimii. Toiminta on valmis; ulkoasu on sinun ja seuraava vaihe.

Vaihe 4 — Tyylittele se

Kaikki yllä renderöityy puhtaana rakenteena, valmiina tyyleillesi. Tyylittele luokkakoukut — .button, .text-input, .label, .field — globaalissa tyylitiedostossasi, tai linkitä valmis teema tiedostossa app.html: 

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

Instanssikohtaiset säädöt kulkevat class -propin kautta, joka lisätään peruskoukkuun: <Button class="wide"> renderöi class="button wide".

Vaihe 5 — Katso kaiken toimivan

SvelteKit-esimerkkisovellus on sama luettelo täysin tyyliteltynä, live-demoineen, Playwright e2e -testeineen ja axe-core-saavutettavuuslähtötasoineen: 

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

Seuraavat askeleet

Kysymyksiä matkan varrella? Ohjesivu on täynnä vastauksia — ja jos jokin vaihe voisi olla selkeämpi, kerro meille ja parannamme opasta mielellämme.