Apgūstiet Lily soli pa solim
Laipni lūdzam! Katra apmācība sākas no nulles un būvē vienu un to pašu mazo lietu — pieejamu, stilizētu veidlapu — apmēram 10 minūtēs, lai varētu salīdzināt ietvarus vienādos apstākļos. Pēc tam dodieties dziļāk ar tēmām un lietotāja iestatījumiem.
Pirms sākat
Vajag pārsteidzoši maz:
- HTML apmācībai — tikai pārlūkprogrammu un teksta redaktoru. Tas ir viss rīku komplekts.
- Svelte, React, Vue, Angular vai Nunjucks — git, Node 26 un pnpm 10 vai jaunāku.
- Blazor — git un .NET SDK 8 vai jaunāku.
Jauni bezgalvas komponentēs? Esat īstajā vietā — katra apmācība skaidro, kas notiek, un katrs solis rāda precīzu kodu kopēšanai.
Četri soļi no nulles līdz izlaišanai
- Jūsu pirmā komponente (~5 minūtes) — izvēlieties savu ietvaru zemāk, iegūstiet kodu un attēlojiet Button.
- Salieciet un stilizējiet (~5 minūtes) — izveidojiet veidlapu ar etiķetēm un stilizējiet to pēc kebab-case klases āķiem (katras ietvara apmācības daļa).
- Piešķiriet tai tēmu (~15 minūtes) — nomainiet ar roku rakstīto CSS pret vienu no 57 gatavajām tēmām, tad ļaujiet lietotājiem pārslēgt izpildes laikā: tēmu apmācība.
- Cieniet iestatījumus (~15 minūtes) — pievienojiet valodas un teksta izmēra izvēli ar iestatījumu palīgiem: palīgu apmācība.
Izvēlieties savu ietvaru
HTML
Nokopējiet semantisku HTML ar klases āķiem un ejam — pietiek ar pārlūkprogrammu un redaktoru.
Svelte
Svelte 5 runas, fragmenti un divvirzienu saistīšana ar bind:value .
React
Funkciju komponentes ar value + onChange un atlikušo īpašību izkliedi.
Vue
Vue 3 vienfailu komponentes ar v-model atbalstu.
Angular
Angular patstāvīgās komponentes ar signālu ievadēm un [(value)].
Blazor
Razor komponentes ar parametriem, ChildContentun bUnit testiem.
Nunjucks
Serverī renderēti makro Eleventy un jebkuram Node veidņu konveijeram.
Nevarat izlemt? Sāciet ar HTML — tā māca klases āķu līgumu, ko dala visi pārējie ietvari, un darbojas tieši no faila.
Dodieties dziļāk
Tēmas
Saistiet vienu no 57 gatavajām tēmām — NHS, GOV.UK, USWDS, gaišu, tumšu un citas — pārrakstiet to ar savu CSS un pievienojiet tēmu pārslēgšanu izpildes laikā ar theme-picker palīgu.
Iestatījumu palīgi
Dodiet lietotājiem kontroli pār tēmu, valodu, teksta izmēru, kustību, meklēšanu, lapu saitēm, kopīgošanu un datuma/laika ievadi ar theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker un date-time-picker: bezgalvas vadīklām ar noturību, SSR drošību un automātisku RTL noteikšanu.
Pēc apmācībām
- Pārlūkojiet komponenšu katalogu — katra komponente dokumentē savas īpašības, ARIA līgumu un tastatūras uzvedību.
- Klonējiet paraugu lietotni , lai redzētu visas 571 komponentes stilizētas un darbojamies kopā — CSS mērķē uz tiem pašiem klases āķiem, ko tikko izmantojāt, tāpēc kopējiet jebkuru daļu savā projektā un pielāgojiet, kā vēlaties.
- Jautājumi? Palīdzības lapā ir atbildes, BUJ un veidi, kā sasniegt draudzīgu cilvēku. Un ja kāda apmācība varētu būt skaidrāka, pastāstiet mums — mēs to ar prieku uzlabosim.