Изучайте Lily шаг за шагом
Добро пожаловать! Каждый учебник начинается с нуля и строит одно и то же небольшое приложение — доступную оформленную форму — примерно за 10 минут, чтобы вы могли сравнивать фреймворки на равных. Затем углубитесь в темы и пользовательские настройки.
Прежде чем начать
Вам понадобится на удивление мало:
- Для учебника по HTML — только браузер и текстовый редактор. Это весь набор инструментов.
- Для Svelte, React, Vue, Angular или Nunjucks — git, Node 26 и pnpm 10 или новее.
- Для Blazor — git и .NET SDK 8 или новее.
Впервые слышите о headless-компонентах? Вы пришли по адресу: каждый учебник объясняет происходящее по ходу дела, а каждый шаг показывает точный код для копирования.
Четыре шага от нуля до запуска
- Ваш первый компонент (~5 минут) — выберите фреймворк ниже, получите код и отобразите кнопку.
- Составьте и оформите (~5 минут) — постройте форму с подписями и оформите её через классы-зацепки в kebab-case (входит в каждый учебник по фреймворку).
- Примените тему (~15 минут) — замените написанный вручную CSS одной из 45 готовых тем, а затем позвольте пользователям переключать её во время выполнения: учебник по темам.
- Учитывайте настройки (~15 минут) — добавьте выбор языка и размера текста с помощью помощников настроек: учебник по помощникам.
Выберите свой фреймворк
HTML
Скопируйте семантический HTML с классами-зацепками — и вперёд: достаточно браузера и редактора.
Svelte
Руны Svelte 5, сниппеты и двусторонняя привязка bind:value.
React
Функциональные компоненты с value + onChange и передачей остальных свойств.
Vue
Однофайловые компоненты Vue 3 с поддержкой v-model.
Angular
Автономные компоненты Angular с входами-сигналами и [(value)].
Blazor
Компоненты Razor с параметрами, ChildContent и тестами bUnit.
Nunjucks
Макросы, отрисовываемые на сервере, для Eleventy и любого конвейера шаблонов Node.
Не можете выбрать? Начните с HTML — он учит контракту классов-зацепок, общему для всех остальных фреймворков, и запускается прямо из файла.
Глубже
Темы
Подключите одну из 45 готовых тем — NHS, GOV.UK, USWDS, светлую, тёмную и другие, — переопределите её собственным CSS и добавьте переключение тем во время выполнения с помощью помощника theme-picker.
Помощники настроек
Дайте пользователям управление темой, языком, размером текста, движением, поиском, ссылками на страницы, функцией «Поделиться» и вводом даты и времени с помощью theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker и date-time-picker: headless-элементов управления с сохранением состояния, безопасностью для SSR и автоматическим определением письма справа налево.
После учебников
- Просмотрите каталог компонентов — каждый компонент документирует свои свойства, контракт ARIA и поведение клавиатуры.
- Клонируйте пример приложения, чтобы увидеть все 571 компонент оформленными и работающими вместе: его CSS нацелен на те же классы-зацепки, что вы только что использовали, поэтому копируйте что угодно в свой проект и подстраивайте как хотите.
- Вопросы? На странице справки есть ответы, список частых вопросов и способы связаться с приветливым человеком. А если какой-то учебник мог бы быть яснее, расскажите нам — мы с радостью его улучшим.