Opi Lily vaihe vaiheelta
Tervetuloa! Jokainen opetusohjelma alkaa tyhjästä ja rakentaa saman pienen asian – saavutettavan, tyylitellyn lomakkeen – noin 10 minuutissa, jotta voit vertailla kehyksiä tasaveroisesti. Mene sitten syvemmälle teemoihin ja käyttäjäasetuksiin.
Ennen kuin aloitat
Tarvitset yllättävän vähän:
- HTML-opetusohjelmaan – vain selaimen ja tekstieditorin. Se on koko työkalupakki.
- Sveltelle, Reactille, Vuelle, Angularille tai Nunjucksille — git, Node 26 ja pnpm 10 tai uudempi.
- Blazorille – git ja .NET SDK 8 tai uudempi.
Oletko uusi päättömien komponenttien parissa? Olet oikeassa paikassa – jokainen opetusohjelma selittää, mitä tapahtuu, ja jokainen vaihe näyttää täsmälleen kopioitavan koodin.
Neljä askelta nollasta julkaisuun
- Ensimmäinen komponenttisi (~5 minuuttia) – valitse kehys alta, hae koodi ja renderöi Button.
- Yhdistä ja tyylittele (~5 minuuttia) – rakenna nimiöity lomake ja tyylittele se kebab-case-luokkakoukkujen avulla (osa jokaista kehysopetusohjelmaa).
- Anna sille teema (~15 minuuttia) – vaihda käsin kirjoittamasi CSS yhteen 57 valmiista teemasta ja anna sitten käyttäjien vaihtaa ajon aikana: teemaopetusohjelma.
- Kunnioita asetuksia (~15 minuuttia) – lisää kielen ja tekstikoon valinta asetusapureilla: apuriopetusohjelma.
Valitse kehyksesi
HTML
Kopioi semanttinen HTML luokkakoukkuineen ja aloita – selain ja editori riittävät.
Svelte
Svelte 5 -runet, snippetit ja bind:value kaksisuuntainen sidonta.
React
Funktiokomponentit, joissa on value + onChange ja muiden ominaisuuksien levitys.
Vue
Vue 3 -yksitiedostokomponentit, joissa on v-model -tuki.
Angular
Angularin itsenäiset komponentit signaalisyötteillä ja [(value)].
Blazor
Razor-komponentit parametreilla, ChildContentja bUnit-testeillä.
Nunjucks
Palvelinpuolella renderöitävät makrot Eleventylle ja mille tahansa Node-mallinnusputkelle.
Etkö osaa päättää? Aloita HTML :stä – se opettaa luokkakoukkusopimuksen, jonka kaikki muut kehykset jakavat, ja se toimii suoraan tiedostosta.
Mene syvemmälle
Teemat
Linkitä yksi 57 valmiista teemasta – NHS, GOV.UK, USWDS, vaalea, tumma ja muita – ohita se omalla CSS:lläsi ja lisää ajonaikainen teemanvaihto theme-picker-apurilla.
Asetusapurit
Anna käyttäjille hallinta teemaan, kieleen, tekstikokoon, liikkeeseen, hakuun, sivulinkkeihin, jakamiseen ja päivämäärän/ajan syöttöön komponenteilla theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker ja date-time-picker: päättömät ohjaimet pysyvyydellä, SSR-turvallisuudella ja automaattisella RTL-tunnistuksella.
Opetusohjelmien jälkeen
- Selaa komponenttiluetteloa – jokainen komponentti dokumentoi ominaisuutensa, ARIA-sopimuksensa ja näppäimistökäyttäytymisensä.
- Kloonaa esimerkkisovellus nähdäksesi kaikki 571 komponenttia tyyliteltyinä ja toimimassa yhdessä – CSS kohdistuu samoihin luokkakoukkuihin, joita juuri käytit, joten kopioi siitä mitä tahansa projektiisi ja muokkaa haluamallasi tavalla.
- Kysyttävää? Ohjesivulla on vastauksia, UKK ja tapoja tavoittaa ystävällinen ihminen. Ja jos jokin opetusohjelma voisi olla selkeämpi, kerro meille – parannamme sitä mielellämme.