Посібник з Svelte — Lily Design System

Що ви створите

Невелика контактна форма — поле з міткою, кнопка надсилання, двостороннє зв’язування, справжня поведінка клавіатури та зчитувача екрана — спочатку «гола», потім стилізована, приблизно за 10 хвилин.

Перш ніж почати

Вам потрібні git, Node 22 або новіший і pnpm 10 або новіший. Підійде будь-який проєкт Svelte 5 — свіжий npx sv create застосунок цілком підійде.

Крок 1 — Отримайте код

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

Компоненти живуть у src/lib/components/{Name}/, по одному каталогу на компонент з файлом .svelte , його тестами, stories та документацією поряд. Скопіюйте потрібні каталоги у свій застосунок або залежте від репозиторію й імпортуйте напряму.

Крок 2 — Ваш перший компонент

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

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

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

Рендерить <button class="button" type="button">. Властивості типізовані: type, disabled, pressed (рендерить aria-pressed для кнопок-перемикачів), label ( aria-label перевизначення), а будь-який додатковий атрибут розповсюджується на корінь.

Крок 3 — Складіть невелику форму

<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 приймає видиму label як власну властивість, а не вкладений компонент мітки — передайте її один раз, на Field, і TextInputу label надає доступну назву. TextInput's value це $bindable rune-властивість, тож bind:value одразу дає вам двостороннє зв’язування.

Перевірено 2026-08-29: цей точний фрагмент було скомпільовано через svelte/server і перевірено на єдиний, правильно пов’язаний <label for> — ранній чернетковий варіант вкладав окремий Label всередині Field, що рендерило дві мітки (одну порожню), оскільки Field уже рендерить власну з label властивість. складений маршрут контактної форми — той самий шаблон, перевірений справжніми e2e- та axe-тестами.

Перевірте свою роботу: запустіть застосунок — форма виглядає простою, саме як і задумано: стилізація ще попереду. Натисніть Tab: фокус проходить через кожен елемент керування, мітка озвучується, а надсилання працює. Поведінка готова; вигляд — ваш, і він наступний.

Крок 4 — Стилізуйте

Усе вище рендериться як чиста структура, готова до ваших стилів. Стилізуйте клас-гачки — .button, .text-input, .label, .field — у своїй глобальній таблиці стилів або підключіть готову тему в app.html:

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

Налаштування для окремих екземплярів ідуть через class властивість, яка додається до базового гачка: <Button class="wide"> рендерить class="button wide".

Крок 5 — Побачте все в дії

Приклад застосунку SvelteKit — той самий каталог повністю стилізований, з живими демо, e2e-тестами Playwright та базовою лінією доступності 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

Наступні кроки

Теми — перемикання під час виконання за допомогою допоміжного засобу Svelte theme-picker.
Допоміжні засоби налаштувань — мова та розмір тексту.
Каталог компонентів — властивості, ARIA та клавіатура для кожного компонента.

Питання по дорозі? сторінка допомоги повна відповідей — а якщо якийсь крок може бути зрозумілішим, повідомте нам і ми із задоволенням покращимо посібник.