Învață Lily, pas cu pas
Bun venit! Fiecare tutorial pornește de la zero și construiește același lucru mic — un formular accesibil, stilizat — în circa 10 minute, ca să poți compara framework-urile pe picior de egalitate. Apoi mergi mai adânc cu teme și preferințele utilizatorului.
Înainte să începi
Ai nevoie de surprinzător de puțin:
- Pentru tutorialul HTML — doar un browser și un editor de text. Atât este întregul set de instrumente.
- Pentru Svelte, React, Vue, Angular sau Nunjucks — git, Node 26 și pnpm 10 sau mai nou.
- Pentru Blazor — git și .NET SDK 8 sau mai nou.
Ești nou în componentele headless? Ești în locul potrivit — fiecare tutorial explică ce se întâmplă pe parcurs, iar fiecare pas arată exact codul de copiat.
Patru pași de la zero la livrare
- Prima ta componentă (~5 minute) — alege mai jos framework-ul tău, obține codul și afișează un Button.
- Compune și stilizează (~5 minute) — construiește un formular cu etichete și stilizează-l pe baza cârligelor de clasă în kebab-case (parte din fiecare tutorial de framework).
- Aplică o temă (~15 minute) — înlocuiește CSS-ul scris de mână cu una dintre cele 57 de teme gata făcute, apoi lasă utilizatorii să schimbe la rulare: tutorialul despre teme.
- Respectă preferințele (~15 minute) — adaugă selecția limbii și a dimensiunii textului cu ajutoarele pentru preferințe: tutorialul despre ajutoare.
Alege-ți framework-ul
HTML
Copiază HTML semantic cu cârligele de clasă și pornește — un browser și un editor sunt tot ce îți trebuie.
Svelte
Rune Svelte 5, snippeturi și legare bidirecțională cu bind:value .
React
Componente funcționale cu value + onChange și răspândirea proprietăților rămase.
Vue
Componente Vue 3 dintr-un singur fișier cu suport pentru v-model .
Angular
Componente standalone Angular cu intrări de tip signal și [(value)].
Blazor
Componente Razor cu parametri, ChildContentși teste bUnit.
Nunjucks
Macrouri randate pe server pentru Eleventy și orice flux de șabloane Node.
Ești indecis? Începe cu HTML — te învață contractul cârligelor de clasă pe care îl împart toate celelalte framework-uri și rulează direct dintr-un fișier.
Mergi mai adânc
Teme
Leagă una dintre cele 57 de teme gata făcute — NHS, GOV.UK, USWDS, luminos, întunecat și altele — suprascrie-o cu propriul CSS și adaugă schimbarea temei la rulare cu ajutorul theme-picker.
Ajutoare pentru preferințe
Dă utilizatorilor control asupra temei, limbii, dimensiunii textului, mișcării, căutării, linkurilor de pagină, partajării și introducerii datei/orei cu theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker și date-time-picker: controale headless cu persistență, siguranță SSR și detectare automată RTL.
După tutoriale
- Răsfoiește catalogul de componente — fiecare componentă își documentează proprietățile, contractul ARIA și comportamentul de tastatură.
- Clonează o aplicație-exemplu pentru a vedea toate cele 571 de componente stilizate și funcționând împreună — CSS-ul țintește aceleași cârlige de clasă pe care tocmai le-ai folosit, deci copiază orice parte în proiectul tău și ajustează-o cum dorești.
- Ai întrebări? Pagina de ajutor are răspunsuri, un FAQ și modalități de a ajunge la un om prietenos. Iar dacă un tutorial ar putea fi mai clar, spune-ne — îl vom îmbunătăți cu plăcere.