Naučte se Lily krok za krokem
Vítejte! Každý návod začíná od nuly a staví tutéž malou věc — přístupný, nastylovaný formulář — asi za 10 minut, abyste mohli frameworky porovnat za stejných podmínek. Pak jděte hlouběji k motivům a uživatelským předvolbám.
Než začnete
Potřebujete překvapivě málo:
- Pro návod k HTML — jen prohlížeč a textový editor. To je celá sada nástrojů.
- Pro Svelte, React, Vue, Angular nebo Nunjucks — git, Node 26 a pnpm 10 nebo novější.
- Pro Blazor — git a .NET SDK 8 nebo novější.
Jste v bezhlavých komponentách noví? Jste na správném místě — každý návod vysvětluje, co se děje, a každý krok ukazuje přesný kód ke zkopírování.
Čtyři kroky od nuly k nasazení
- Vaše první komponenta (~5 minut) — vyberte níže svůj framework, získejte kód a vykreslete Button.
- Skládání a stylování (~5 minut) — postavte formulář se štítky a nastylujte ho pomocí háčků tříd v kebab-case (součást každého návodu k frameworku).
- Dejte mu motiv (~15 minut) — vyměňte ručně psané CSS za jeden z 57 hotových motivů a pak nechte uživatele přepínat za běhu: návod k motivům.
- Respektujte předvolby (~15 minut) — přidejte výběr jazyka a velikosti textu pomocí pomocníků pro předvolby: návod k pomocníkům.
Vyberte svůj framework
HTML
Zkopírujte sémantické HTML s háčky tříd a jděte na to — stačí prohlížeč a editor.
Svelte
Runy Svelte 5, snippety a obousměrná vazba bind:value .
React
Funkční komponenty s value + onChange a rozprostřením zbývajících vlastností.
Vue
Jednosouborové komponenty Vue 3 s podporou v-model .
Angular
Samostatné komponenty Angularu se signálovými vstupy a [(value)].
Blazor
Komponenty Razor s parametry, ChildContenta testy bUnit.
Nunjucks
Makra renderovaná na serveru pro Eleventy a jakýkoli šablonovací řetězec Node.
Nemůžete se rozhodnout? Začněte s HTML — učí smlouvu o háčcích tříd, kterou sdílí všechny ostatní frameworky, a běží přímo ze souboru.
Jděte hlouběji
Motivy
Odkažte jeden z 57 hotových motivů — NHS, GOV.UK, USWDS, světlý, tmavý a další — přepište jej vlastním CSS a přidejte přepínání motivů za běhu pomocníkem theme-picker.
Pomocníci pro předvolby
Dejte uživatelům kontrolu nad motivem, jazykem, velikostí textu, pohybem, hledáním, odkazy na stránky, sdílením a zadáváním data/času pomocí theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker a date-time-picker: bezhlavé ovládací prvky s perzistencí, bezpečností SSR a automatickou detekcí RTL.
Po návodech
- Projděte si katalog komponent — každá komponenta dokumentuje své vlastnosti, smlouvu ARIA a chování klávesnice.
- Naklonujte ukázkovou aplikaci , abyste viděli všech 571 komponent nastylovaných a spolupracujících — CSS cílí na stejné háčky tříd, které jste právě použili, takže zkopírujte libovolnou část do svého projektu a upravte ji podle libosti.
- Otázky? Stránka nápovědy má odpovědi, často kladené otázky a způsoby, jak se spojit s přátelským člověkem. A pokud by některý návod mohl být jasnější, řekněte nám — rádi ho vylepšíme.