Naučite Lily korak po korak

Dobro došli! Svaki vodič kreće od nule i gradi istu malu stvar — pristupačan, stiliziran obrazac — za otprilike 10 minuta, da frameworke možete uspoređivati pod istim uvjetima. Zatim idite dublje s temama i korisničkim postavkama.

Prije nego počnete

Treba vam iznenađujuće malo:

Za HTML vodič — samo preglednik i uređivač teksta. To je cijeli alat.
Za Svelte, React, Vue, Angular ili Nunjucks — git, Node 26 i pnpm 10 ili noviji.
Za Blazor — git i .NET SDK 8 ili noviji.

Novi ste u bezglavim komponentama? Na pravom ste mjestu — svaki vodič objašnjava što se događa dok napredujete, a svaki korak pokazuje točan kod za kopiranje.

Četiri koraka od nule do objave

Vaša prva komponenta (~5 minuta) — odaberite dolje svoj framework, dohvatite kod i prikažite Button.
Složite i stilizirajte (~5 minuta) — izgradite obrazac s oznakama i stilizirajte ga prema kukama klasa u kebab-caseu (dio svakog vodiča za framework).
Dajte mu temu (~15 minuta) — zamijenite ručno pisani CSS jednom od 57 gotovih tema, a zatim korisnicima dopustite prebacivanje tijekom izvođenja: vodič o temama.
Poštujte postavke (~15 minuta) — dodajte odabir jezika i veličine teksta pomoću pomoćnika za postavke: vodič o pomoćnicima.

Odaberite svoj framework

HTML

Kopirajte semantički HTML s kukama klasa i krenite — dovoljni su preglednik i uređivač.

~10 minuta · najlakši početak

Svelte

Runovi Svelte 5, snippeti i dvosmjerno povezivanje s bind:value .

~10 minuta

React

Funkcijske komponente s value + onChange i širenjem preostalih svojstava.

~10 minuta

Vue

Jednodatotečne komponente Vue 3 s podrškom za v-model .

~10 minuta

Angular

Samostalne komponente Angulara sa signalnim ulazima i [(value)].

~10 minuta

Blazor

Razor komponente s parametrima, ChildContenti bUnit testovima.

~10 minuta

Nunjucks

Makroi renderirani na poslužitelju za Eleventy i bilo koji Node cjevovod predložaka.

~10 minuta

Ne možete se odlučiti? Počnite s HTML — uči ugovor o kukama klasa koji dijele svi ostali frameworki i radi izravno iz datoteke.

Idite dublje

Teme

Povežite jednu od 57 gotovih tema — NHS, GOV.UK, USWDS, svijetlu, tamnu i druge — nadjačajte je vlastitim CSS-om i dodajte promjenu teme tijekom izvođenja pomoćnikom theme-picker.

~15 minuta

Pomoćnici za postavke

Dajte korisnicima kontrolu nad temom, jezikom, veličinom teksta, kretanjem, pretraživanjem, poveznicama stranica, dijeljenjem i unosom datuma/vremena pomoću theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker i date-time-picker: bezglavih kontrola s trajnošću, SSR sigurnošću i automatskim otkrivanjem RTL-a.

~15 minuta

Nakon vodiča

Pregledajte katalog komponenti — svaka komponenta dokumentira svoja svojstva, ARIA ugovor i ponašanje tipkovnice.
Klonirajte primjer aplikacije da vidite svih 571 komponentu stiliziranu i kako rade zajedno — CSS cilja iste kuke klasa koje ste upravo koristili, pa kopirajte bilo koji njegov dio u svoj projekt i prilagodite ga kako želite.
Pitanja? Stranica pomoći ima odgovore, česta pitanja i načine da dođete do ljubaznog čovjeka. A ako bi neki vodič mogao biti jasniji, recite nam — rado ćemo ga poboljšati.