Naučite se Lily korak za korakom

Dobrodošli! Vsak vodič se začne pri nič in zgradi isto majhno stvar — dostopen, stiliziran obrazec — v približno 10 minutah, da lahko ogrodja primerjate pod enakimi pogoji. Nato pojdite globlje s temami in uporabniškimi nastavitvami.

Preden začnete

Potrebujete presenetljivo malo:

Za vodič HTML — samo brskalnik in urejevalnik besedila. To je celotno orodje.
Za Svelte, React, Vue, Angular ali Nunjucks — git, Node 26 in pnpm 10 ali novejši.
Za Blazor — git in .NET SDK 8 ali novejši.

Ste novi pri brezglavih komponentah? Ste na pravem mestu — vsak vodič pojasni, kaj se dogaja, in vsak korak pokaže točno kodo za kopiranje.

Štirje koraki od nič do objave

Vaša prva komponenta (~5 minut) — spodaj izberite svoje ogrodje, pridobite kodo in prikažite Button.
Sestavite in stilizirajte (~5 minut) — zgradite obrazec z oznakami in ga stilizirajte glede na kavlje razredov v kebab-case (del vsakega vodiča za ogrodje).
Dodelite mu temo (~15 minut) — zamenjajte ročno napisan CSS z eno od 57 pripravljenih tem, nato uporabnikom dovolite preklapljanje med izvajanjem: vodič o temah.
Spoštujte nastavitve (~15 minut) — dodajte izbiro jezika in velikosti besedila s pomočniki za nastavitve: vodič o pomočnikih.

Izberite svoje ogrodje

HTML

Kopirajte semantični HTML s kavlji razredov in začnite — dovolj sta brskalnik in urejevalnik.

~10 minut · najlažji začetek

Svelte

Runi Svelte 5, odlomki in dvosmerna vezava z bind:value .

~10 minut

React

Funkcijske komponente z value + onChange in razširjanjem preostalih lastnosti.

~10 minut

Vue

Enodatotečne komponente Vue 3 s podporo za v-model .

~10 minut

Angular

Samostojne komponente Angularja s signalnimi vnosi in [(value)].

~10 minut

Blazor

Komponente Razor s parametri, ChildContentin testi bUnit.

~10 minut

Nunjucks

Makri, upodobljeni na strežniku, za Eleventy in katerikoli cevovod predlog Node.

~10 minut

Ne morete se odločiti? Začnite s HTML — uči pogodbo o kavljih razredov, ki jo delijo vsa druga ogrodja, in deluje neposredno iz datoteke.

Pojdite globlje

Teme

Povežite eno od 57 pripravljenih tem — NHS, GOV.UK, USWDS, svetlo, temno in druge — prepišite jo z lastnim CSS in dodajte preklapljanje tem med izvajanjem s pomočnikom theme-picker.

~15 minut

Pomočniki za nastavitve

Uporabnikom dajte nadzor nad temo, jezikom, velikostjo besedila, gibanjem, iskanjem, povezavami strani, deljenjem in vnosom datuma/časa s theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker in date-time-picker: brezglavimi kontrolniki s trajnostjo, varnostjo SSR in samodejnim zaznavanjem RTL.

~15 minut

Po vodičih

Prebrskajte katalog komponent — vsaka komponenta dokumentira svoje lastnosti, pogodbo ARIA in vedenje tipkovnice.
Klonirajte vzorčno aplikacijo , da vidite vseh 571 komponent stiliziranih in delujočih skupaj — CSS cilja na iste kavlje razredov, ki ste jih pravkar uporabili, zato kopirajte katerikoli del v svoj projekt in ga prilagodite po želji.
Vprašanja? Stran s pomočjo ima odgovore, pogosta vprašanja in načine, kako priti do prijaznega človeka. In če bi bil kakšen vodič lahko jasnejši, povejte nam — z veseljem ga bomo izboljšali.