Išmokite Lily žingsnis po žingsnio

Sveiki! Kiekvienas mokymas prasideda nuo nulio ir sukuria tą patį mažą dalyką — prieinamą, stilizuotą formą — per maždaug 10 minučių, kad galėtumėte palyginti karkasus vienodomis sąlygomis. Tada gilinkitės į temas ir vartotojo nuostatas.

Prieš pradedant

Reikia stebėtinai nedaug:

HTML mokymui — tik naršyklės ir teksto redaktoriaus. Tai visas įrankių rinkinys.
Svelte, React, Vue, Angular ar Nunjucks — git, Node 26 ir pnpm 10 ar naujesnės.
Blazor — git ir .NET SDK 8 ar naujesnio.

Nauji bevaigiuose komponentuose? Esate tinkamoje vietoje — kiekvienas mokymas paaiškina, kas vyksta, o kiekvienas žingsnis rodo tikslų kodą kopijavimui.

Keturi žingsniai nuo nulio iki paleidimo

Jūsų pirmasis komponentas (~5 minučių) — pasirinkite savo karkasą žemiau, gaukite kodą ir atvaizduokite Button.
Sudėkite ir stilizuokite (~5 minučių) — sukurkite formą su etiketėmis ir stilizuokite ją pagal kebab-case klasės kabliukus (kiekvieno karkaso mokymo dalis).
Suteikite jam temą (~15 minučių) — pakeiskite ranka rašytą CSS viena iš 57 paruoštų temų, tada leiskite vartotojams perjungti vykdymo metu: temų mokymas.
Gerbkite nuostatas (~15 minučių) — pridėkite kalbos ir teksto dydžio pasirinkimą su nuostatų pagalbininkais: pagalbininkų mokymas.

Pasirinkite savo karkasą

HTML

Nukopijuokite semantinį HTML su klasės kabliukais ir pirmyn — pakanka naršyklės ir redaktoriaus.

~10 minučių · lengviausias startas

Svelte

Svelte 5 runos, fragmentai ir dvikryptis susiejimas su bind:value .

~10 minučių

React

Funkciniai komponentai su value + onChange ir likusių savybių paskleidimu.

~10 minučių

Vue

Vue 3 vieno failo komponentai su v-model palaikymu.

~10 minučių

Angular

Atskiri Angular komponentai su signalų įvestimis ir [(value)].

~10 minučių

Blazor

Razor komponentai su parametrais, ChildContentir bUnit testais.

~10 minučių

Nunjucks

Serveryje atvaizduojami makrokomandos Eleventy ir bet kuriam Node šablonų konvejeriui.

~10 minučių

Nesate tikri? Pradėkite nuo HTML — jis moko klasės kabliukų sutarties, kurią dalijasi visi kiti karkasai, ir veikia tiesiai iš failo.

Gilinkitės

Temos

Susiekite vieną iš 57 paruoštų temų — NHS, GOV.UK, USWDS, šviesią, tamsią ir daugiau — pakeiskite ją savo CSS ir pridėkite temų perjungimą vykdymo metu su theme-picker pagalbininku.

~15 minučių

Nuostatų pagalbininkai

Suteikite vartotojams temos, kalbos, teksto dydžio, judesio, paieškos, puslapių nuorodų, dalijimosi ir datos/laiko įvedimo kontrolę su theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker ir date-time-picker: bevaigiais valdikliais su išsaugojimu, SSR saugumu ir automatiniu RTL aptikimu.

~15 minučių

Po mokymų

Naršykite komponentų katalogą — kiekvienas komponentas dokumentuoja savo savybes, ARIA sutartį ir klaviatūros elgseną.
Klonuokite pavyzdinę programą , kad pamatytumėte visus 571 komponentus stilizuotus ir veikiančius kartu — CSS taikosi į tuos pačius klasės kabliukus, kuriuos ką tik naudojote, todėl kopijuokite bet kurią dalį į savo projektą ir koreguokite kaip norite.
Klausimų? Pagalbos puslapis turi atsakymus, DUK ir būdus pasiekti draugišką žmogų. O jei koks nors mokymas galėtų būti aiškesnis, pasakykite mums — mielai jį patobulinsime.