Научете Lily стъпка по стъпка
Добре дошли! Всеки урок започва от нулата и изгражда едно и също малко нещо — достъпен, стилизиран формуляр — за около 10 минути, за да сравнявате фреймуърците при равни условия. След това навлезте по-дълбоко с темите и потребителските предпочитания.
Преди да започнете
Нужно ви е изненадващо малко:
- За урока по HTML — само браузър и текстов редактор. Това е целият набор от инструменти.
- За Svelte, React, Vue, Angular или Nunjucks — git, Node 26 и pnpm 10 или по-нов.
- За Blazor — git и .NET SDK 8 или по-нов.
Нови сте в безглавите компоненти? На правилното място сте — всеки урок обяснява какво се случва, докато напредвате, а всяка стъпка показва точния код за копиране.
Четири стъпки от нулата до пускане
- Първият ви компонент (~5 минути) — изберете фреймуърка си по-долу, вземете кода и изобразете Button.
- Съставете и стилизирайте (~5 минути) — изградете формуляр с етикети и го стилизирайте чрез куките за клас в kebab-case (част от всеки урок за фреймуърк).
- Дайте му тема (~15 минути) — сменете ръчно написания си CSS с една от 57-те готови теми, после оставете потребителите да превключват по време на изпълнение: урок за темите.
- Уважавайте предпочитанията (~15 минути) — добавете избор на език и размер на текста с помощниците за предпочитания: урок за помощниците.
Изберете своя фреймуърк
HTML
Копирайте семантичен HTML с куките за клас и тръгвайте — браузър и редактор са всичко, което е нужно.
Svelte
Руни на Svelte 5, фрагменти и двупосочно свързване с bind:value .
React
Функционални компоненти с value + onChange и разпространение на останалите свойства.
Vue
Едно-файлови компоненти на Vue 3 с поддръжка на v-model .
Angular
Самостоятелни компоненти на Angular със signal входове и [(value)].
Blazor
Компоненти Razor с параметри, ChildContentи тестове с bUnit.
Nunjucks
Макроси, изобразявани на сървъра, за Eleventy и всеки конвейер за шаблони на Node.
Колебаете се? Започнете с HTML — учи договора за куките за клас, който споделят всички останали фреймуърци, и работи директно от файл.
Навлезте по-дълбоко
Теми
Свържете една от 57-те готови теми — 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: безглави контроли с устойчивост, безопасност за SSR и автоматично откриване на RTL.
След уроците
- Разгледайте каталога с компоненти — всеки компонент документира своите свойства, договор за ARIA и поведение на клавиатурата.
- Клонирайте примерно приложение , за да видите и 571-те компонента стилизирани и работещи заедно — CSS е насочен към същите куки за клас, които току-що използвахте, така че копирайте която и да е част в проекта си и я нагласете както желаете.
- Въпроси? Страницата за помощ има отговори, често задавани въпроси и начини да се свържете с дружелюбен човек. А ако някой урок може да е по-ясен, кажете ни — с удоволствие ще го подобрим.