Svelte'i õpetus — Lily Design System

Mida sa ehitad

Väike kontaktivorm — sildiga väli, saatmisnupp, kahesuunaline sidumine, tõeline klaviatuuri- ja ekraanilugeja käitumine — esmalt paljas, seejärel kujundatud, umbes 10 minutiga.

Enne alustamist

Vaja on gitti, Node 22 või uuemat ja pnpm 10 või uuemat. Sobib iga Svelte 5 projekt — täiesti uus npx sv create rakendus on piisav.

Samm 1 — Hangi kood

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

Komponendid asuvad kaustas src/lib/components/{Name}/, üks kaust komponendi kohta koos .svelte failiga, selle testide, storyde ja dokumentatsiooniga kõrvuti. Kopeeri vajalikud kaustad oma rakendusse või sõltu repost ja impordi otse.

Samm 2 — Sinu esimene komponent

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

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

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

Renderdab <button class="button" type="button">. Propid on tüübitud: type, disabled, pressed (renderdab aria-pressed (renderdab label ( aria-label lülitusnuppudele),

Samm 3 — Kombineeri väike vorm

<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 võtab nähtava label oma propina pesastatud sildikomponendi asemel — anna see üks kord edasi, elemendile Fieldja TextInputelemendist label annab ligipääsetava nime. TextInput's value ülekirjutamiseks) ja iga lisaatribuut jagatakse juurele laiali. $bindable on bind:value rune'i prop, seega

Kontrollitud 2026-08-29: annab sulle kohe kahesuunalise sidumise. svelte/server just see koodilõik kompileeriti käsuga <label for> ja kontrolliti ühe, õigesti seotud sildi suhtes Label sees Field— varasem mustand pesastas eraldi kaks silti (üks tühi), sest Field renderdab juba oma sildi label selle sisse, mis renderdas Koostatud kontaktivormi marsruut on sama muster, proovitud päris e2e- ja axe-testidega.

Kontrolli oma tööd: käivita rakendus ja vorm paistab paljas — täpselt nagu ette nähtud: kujundamine on alles ees. Vajuta Tab: fookus liigub läbi iga juhtelemendi, silt kuulutatakse ette ja saatmine töötab. Käitumine on valmis; välimus on sinu ja järgmine samm.

Samm 4 — Kujunda see

Kõik ülaltoodu renderdatakse puhta struktuurina, valmis sinu stiilidele. Kujunda klassikonksud — .button, .text-input, .label, .field — oma globaalses laadilehes või lingi valmis teema failis app.html:

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

Instantsipõhised kohandused käivad läbi class propi, mis lisatakse baaskonksule: <Button class="wide"> renderdab class="button wide".

Samm 5 — Vaata kõike töötamas

SvelteKiti näiterakendus on sama kataloog täielikult kujundatuna, elavate demode, Playwright e2e-testide ja axe-core ligipääsetavuse baasjoonega:

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

Järgmised sammud

Teemad — vahetamine töö ajal Svelte'i theme-picker abiga.
Eelistuste abilised — keel ja teksti suurus.
Komponentide kataloog — omadused, ARIA ja klaviatuur komponendi kohta.

Küsimusi teel? Abileht on täis vastuseid — ja kui mõni samm saaks olla selgem, anna meile teada ja me parandame õpetust hea meelega.