Svelte apmācība — Lily Design System

Ko jūs izveidosiet

Neliela kontaktu veidlapa — lauks ar iezīmi, iesniegšanas poga, divvirzienu saistīšana, īsta tastatūras un ekrāna lasītāja darbība — vispirms kaila, tad noformēta, apmēram 10 minūtēs.

Pirms sākat

Nepieciešams git, Node 22 vai jaunāks un pnpm 10 vai jaunāks. Der jebkurš Svelte 5 projekts — pavisam jauna npx sv create lietotne ir pietiekama.

1. solis — Iegūstiet kodu

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

Komponentes atrodas direktorijā src/lib/components/{Name}/, viena direktorija katrai komponentei ar .svelte datni, tās testiem, story un dokumentāciju blakus. Nokopējiet vajadzīgās direktorijas savā lietotnē vai atkarieties no repozitorija un importējiet tieši.

2. solis — Jūsu pirmā komponente

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

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

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

Attēlo <button class="button" type="button">. Props ir tipizēti: type, disabled, pressed (attēlo aria-pressed (attēlo label ( aria-label pārslēgšanas pogām),

3. solis — Salieciet nelielu veidlapu

<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 pieņem redzamo label kā savu propu, nevis iekļautu iezīmes komponenti — nododiet to vienreiz, pie Fieldun TextInputno label nodrošina pieejamo nosaukumu. TextInput's value lai pārrakstītu), un jebkurš papildu atribūts tiek izklāts uz saknes. $bindable ir bind:value rune prop, tāpēc

Pārbaudīts 2026-08-29: dod jums divvirzienu saistīšanu uzreiz. svelte/server tieši šis fragments tika sakompilēts ar <label for> un pārbaudīts uz vienu, pareizi saistītu iezīmi Label iekšā Field— agrāks melnraksts iekļāva atsevišķu divas iezīmes (vienu tukšu), jo Field jau pati attēlo savu no label iekšā, kas attēloja Salikto kontaktu veidlapas maršrutu ir tas pats modelis, pārbaudīts ar īstiem e2e un axe testiem.

Pārbaudiet savu darbu: palaidiet lietotni, un veidlapa izskatās kaila — tieši kā paredzēts: noformēšana vēl priekšā. Nospiediet Tab: fokuss iet cauri katrai vadīklai, iezīme tiek paziņota, un iesniegšana darbojas. Uzvedība ir gatava; izskats ir jūsu un ir nākamais solis.

4. solis — Noformējiet to

Viss iepriekš tiek attēlots kā tīra struktūra, gatava jūsu stiliem. Noformējiet klases āķus — .button, .text-input, .label, .field — savā globālajā stilu lapā vai saistiet gatavu motīvu failā app.html:

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

Pielāgojumi katrai instancei iet caur class propu, kas tiek pievienots pamata āķim: <Button class="wide"> attēlo class="button wide".

5. solis — Redziet, kā viss darbojas

SvelteKit paraugu lietotne ir tas pats katalogs pilnībā noformēts, ar dzīvām demonstrācijām, Playwright e2e testiem un axe-core pieejamības bāzlīniju:

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

Nākamie soļi

Motīvi — pārslēgšana izpildes laikā ar Svelte palīgu theme-picker.
Preferenču palīgi — valoda un teksta izmērs.
Komponenšu katalogs — īpašības, ARIA un tastatūra katrai komponentei.

Jautājumi pa ceļam? Palīdzības lapa ir pilna atbilžu — un, ja kāds solis varētu būt skaidrāks, pastāstiet mums un mēs labprāt uzlabosim apmācību.