Ръководство за Svelte

Какво ще изградите

Малка форма за контакт — поле с етикет, бутон за изпращане, двупосочно свързване, истинско поведение на клавиатурата и екранния четец — първо гола, после стилизирана, за около 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 , неговите тестове, story-та и документация един до друг. Копирайте нужните директории в приложението си или зависете от хранилището и импортирайте директно.

Стъпка 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">. Props са типизирани: 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 като свой собствен prop вместо вложен компонент за етикет — подайте го веднъж, на Fieldи TextInputот label осигурява достъпното име. TextInput's value за презаписване), а всеки допълнителен атрибут се разпръсква върху корена. $bindable е bind:value rune prop, така че

Проверено на 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 prop, който се добавя към базовата кука: <Button class="wide"> рендира class="button wide".

Стъпка 5 — Вижте всичко в действие

Примерното приложение SvelteKit е същият каталог напълно стилизиран, с демонстрации на живо, Playwright e2e тестове и базова линия за достъпност 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

Следващи стъпки

Теми — превключване по време на изпълнение с помощника theme-picker за Svelte.
Помощници за предпочитания — език и размер на текста.
Каталог на компонентите — свойства, ARIA и клавиатура за всеки компонент.

Въпроси по пътя? Страницата за помощ е пълна с отговори — а ако някоя стъпка може да е по-ясна, кажете ни и с радост ще подобрим ръководството.