Õpi Lilyt samm-sammult

Tere tulemast! Iga õpetus algab nullist ja ehitab sama väikese asja – juurdepääsetava, kujundatud vormi – umbes 10 minutiga, et saaksid raamistikke võrdselt võrrelda. Seejärel mine sügavamale teemade ja kasutajaeelistustega.

Enne alustamist

Vaja on üllatavalt vähe:

HTML-i õpetuse jaoks – ainult brauser ja tekstiredaktor. See on kogu tööriistakast.
Svelte'i, Reacti, Vue, Angulari või Nunjucksi jaoks — git, Node 26 ja pnpm 10 või uuem.
Blazori jaoks – git ja .NET SDK 8 või uuem.

Päisteta komponendid on sulle uued? Oled õiges kohas – iga õpetus selgitab, mis toimub, ning iga samm näitab täpset kopeeritavat koodi.

Neli sammu nullist avaldamiseni

Sinu esimene komponent (~5 minutit) – vali allpool oma raamistik, hangi kood ja renderda Button.
Koosta ja kujunda (~5 minutit) – ehita sildistatud vorm ja kujunda see kebab-case klassihaakide abil (iga raamistikuõpetuse osa).
Anna sellele teema (~15 minutit) – vaheta oma käsitsi kirjutatud CSS ühe 57 valmisteema vastu ning lase siis kasutajatel töö ajal vahetada: teemaõpetus.
Austa eelistusi (~15 minutit) – lisa eelistuste abilistega keele ja teksti suuruse valik: abiliste õpetus.

Vali oma raamistik

HTML

Kopeeri semantiline HTML koos klassihaakidega ja alusta – piisab brauserist ja redaktorist.

~10 minutit · lihtsaim algus

Svelte

Svelte 5 runed, snippetid ja bind:value kahesuunaline sidumine.

~10 minutit

React

Funktsioonikomponendid, kus on value + onChange ja ülejäänud atribuutide laiali jagamine.

~10 minutit

Vue

Vue 3 ühefailikomponendid, v-model toega.

~10 minutit

Angular

Angulari iseseisvad komponendid signaalisisenditega ja [(value)].

~10 minutit

Blazor

Razor-komponendid parameetritega, ChildContentja bUniti testid.

~10 minutit

Nunjucks

Serveris renderdatavad makrod Eleventy ja mis tahes Node'i mallitorustiku jaoks.

~10 minutit

Ei suuda valida? Alusta HTML -ga – see õpetab klassihaakide lepingut, mida iga teine raamistik jagab, ja töötab otse failist.

Mine sügavamale

Teemad

Lingi üks 57 valmisteemast – NHS, GOV.UK, USWDS, hele, tume ja veel – kirjuta see üle oma CSS-iga ja lisa theme-picker abilisega teemavahetus töö ajal.

~15 minutit

Eelistuste abilised

Anna kasutajatele kontroll teema, keele, teksti suuruse, liikumise, otsingu, lehelinkide, jagamise ning kuupäeva/kellaaja sisestuse üle komponentidega theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker ja date-time-picker: päisteta juhtelemendid püsivuse, SSR-turvalisuse ja automaatse RTL-tuvastusega.

~15 minutit

Pärast õpetusi

Sirvi komponentide kataloogi – iga komponent dokumenteerib oma atribuudid, ARIA lepingu ja klaviatuurikäitumise.
Klooni näiterakendus , et näha kõiki 571 komponenti kujundatuna ja koos töötamas – CSS sihib samu klassihaake, mida just kasutasid, nii et kopeeri sellest ükskõik mis oma projekti ja kohanda, nagu soovid.
Küsimusi? Abileht sisaldab vastuseid, KKK-d ja viise sõbraliku inimeseni jõuda. Ja kui mõni õpetus võiks olla selgem, anna meile teada – parandame seda hea meelega.