Lær Lily, trin for trin

Velkommen! Hver vejledning starter fra bunden og bygger det samme lille stykke – en tilgængelig, stilet formular – på cirka 10 minutter, så du kan sammenligne frameworks på lige fod. Gå derefter dybere med temaer og brugerpræferencer.

Før du starter

Du har brug for overraskende lidt:

Til HTML-vejledningen – blot en browser og en teksteditor. Det er hele værktøjskassen.
Til Svelte, React, Vue, Angular eller Nunjucks — git, Node 26 og pnpm 10 eller nyere.
Til Blazor – git og .NET SDK 8 eller nyere.

Ny med hovedløse komponenter? Så er du det rette sted – hver vejledning forklarer, hvad der sker undervejs, og hvert trin viser den præcise kode, du skal kopiere.

Fire trin fra nul til udgivet

Din første komponent (ca. 5 minutter) – vælg dit framework nedenfor, hent koden og gengiv en Button.
Sammensæt og stil (ca. 5 minutter) – byg en formular med etiketter og stil den med klassekrogene i kebab-case (en del af hver framework-vejledning).
Giv det et tema (ca. 15 minutter) – byt din håndskrevne CSS ud med et af de 57 færdige temaer, og lad derefter brugere skifte under kørsel: temavejledningen.
Respektér præferencer (ca. 15 minutter) – tilføj valg af sprog og tekststørrelse med præferencehjælperne: hjælpervejledningen.

Vælg dit framework

HTML

Kopiér semantisk HTML med klassekrogene og kom i gang – en browser og en editor er alt, hvad der skal til.

ca. 10 minutter · nemmeste start

Svelte

Svelte 5-runes, snippets og bind:value tovejsbinding.

ca. 10 minutter

React

Funktionskomponenter med value + onChange og videregivelse af øvrige props.

ca. 10 minutter

Vue

Vue 3-enkeltfilskomponenter med understøttelse af v-model .

ca. 10 minutter

Angular

Selvstændige Angular-komponenter med signalinput og [(value)].

ca. 10 minutter

Blazor

Razor-komponenter med parametre, ChildContentog bUnit-tests.

ca. 10 minutter

Nunjucks

Servergengivne makroer til Eleventy og enhver Node-skabelonpipeline.

ca. 10 minutter

Kan du ikke vælge? Start med HTML – den lærer klassekrog-kontrakten, som alle andre frameworks deler, og den kører direkte fra en fil.

Gå dybere

Temaer

Link et af 57 færdige temaer – NHS, GOV.UK, USWDS, lyst, mørkt og flere – tilsidesæt det med din egen CSS, og tilføj temaskift under kørsel med theme-picker-hjælperen.

ca. 15 minutter

Præferencehjælpere

Giv brugerne kontrol over tema, sprog, tekststørrelse, bevægelse, søgning, sidelinks, deling og indtastning af dato/tid med theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker og date-time-picker: hovedløse kontroller med vedvarende lagring, SSR-sikkerhed og automatisk RTL-registrering.

ca. 15 minutter

Efter vejledningerne

Gennemse komponentkataloget – hver komponent dokumenterer sine props, ARIA-kontrakt og tastaturadfærd.
Klon en eksempelapp for at se alle 571 komponenter stilet og samarbejde – CSS'en retter sig mod de samme klassekroge, som du netop har brugt, så kopiér hvad som helst af den ind i dit projekt og tilpas den, som du vil.
Spørgsmål? Hjælpesiden har svar, en FAQ og måder at nå et venligt menneske på. Og hvis en vejledning kunne være tydeligere, så fortæl os det – vi forbedrer den gerne.