Lily Design System™

„Svelte“ vadovas

„Lily“ „Svelte“ biblioteka yra kanoninis įgyvendinimas: „Svelte 5“ runos, tipizuoti propai, likusių propų paskleidimas ir dvipusis susiejimas su bind:value.

Ką sukursite

Nedidelė kontaktų forma — laukas su žyma, siuntimo mygtukas, dvipusis susiejimas, tikras klaviatūros ir ekrano skaitytuvo elgesys — pirma plika, paskui apipavidalinta, per maždaug 10 minučių.

Prieš pradedant

Reikia git, Node 22 ar naujesnės ir pnpm 10 ar naujesnio. Tinka bet kuris „Svelte 5“ projektas — visiškai nauja npx sv create programa pakanka.

1 žingsnis — Gaukite kodą

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

Komponentai yra aplanke src/lib/components/{Name}/, vienas katalogas kiekvienam komponentui su .svelte byla, jo testais, story ir dokumentacija greta. Nukopijuokite reikalingus katalogus į savo programą arba priklausykite nuo saugyklos ir importuokite tiesiogiai.

2 žingsnis — Jūsų pirmasis komponentas

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

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

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

Atvaizduoja <button class="button" type="button">. Propai tipizuoti: type, disabled, pressed (atvaizduoja aria-pressed (atvaizduoja label ( aria-label perjungimo mygtukams),

3 žingsnis — Sudėkite nedidelę 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 priima matomą label kaip savo prop vietoj įdėto žymos komponento — perduokite ją vieną kartą, prie Fieldir TextInputiš label suteikia prieinamą pavadinimą. TextInput's value norint pakeisti), o bet koks papildomas atributas paskleidžiamas ant šaknies. $bindable yra bind:value rune prop, todėl

Patikrinta 2026-08-29: iš karto suteikia dvipusį susiejimą. svelte/server būtent šis fragmentas buvo sukompiliuotas per <label for> ir patikrintas dėl vienintelės, teisingai susietos žymos Label viduje Field— ankstesnis juodraštis įdėjo atskirą dvi žymos (viena tuščia), nes Field jau pats atvaizduoja savo iš label viduje, kuris atvaizdavo Sudėtinis kontaktų formos maršrutas yra tas pats šablonas, išbandytas tikrais e2e ir axe testais.

Patikrinkite savo darbą: paleiskite programą ir forma atrodo plika — kaip ir numatyta: stilius dar laukia. Paspauskite Tab: fokusas pereina per kiekvieną valdiklį, žyma paskelbiama, o siuntimas veikia. Elgesys baigtas; išvaizda jūsų ir yra kitas žingsnis.

4 žingsnis — Apipavidalinkite

Viskas aukščiau atvaizduojama kaip gryna struktūra, paruošta jūsų stiliams. Apipavidalinkite klasių kablius — .button, .text-input, .label, .field — savo visuotinėje stilių lentelėje arba susiekite paruoštą temą faile app.html: 

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

Koregavimai kiekvienam egzemplioriui eina per class prop, kuris pridedamas prie bazinio kablio: <Button class="wide"> atvaizduoja class="button wide".

5 žingsnis — Pažiūrėkite, kaip viskas veikia

„SvelteKit“ pavyzdinė programa yra tas pats katalogas visiškai apipavidalintas, su gyvomis demonstracijomis, „Playwright“ e2e testais ir axe-core prieinamumo pradine riba: 

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

Tolesni žingsniai

Klausimų pakeliui? Pagalbos puslapis pilnas atsakymų — o jei kuris nors žingsnis galėtų būti aiškesnis, pasakykite mums ir mielai patobulinsime vadovą.