Tanuld meg a Lilyt lépésről lépésre
Üdv! Minden oktatóanyag a nulláról indul, és ugyanazt a kis dolgot építi fel – egy hozzáférhető, stílusozott űrlapot – körülbelül 10 perc alatt, hogy a keretrendszereket azonos alapon hasonlíthasd össze. Utána menj mélyebbre a témázással és a felhasználói beállításokkal.
Mielőtt belekezdesz
Meglepően kevés kell hozzá:
- A HTML-oktatóanyaghoz – csak egy böngésző és egy szövegszerkesztő. Ez a teljes eszköztár.
- Svelte-hez, Reacthez, Vue-hoz, Angularhoz vagy Nunjuckshoz — git, Node 26 és pnpm 10 vagy újabb.
- Blazorhoz – git és a .NET SDK 8 vagy újabb.
Új vagy a fej nélküli komponensek világában? Jó helyen jársz – minden oktatóanyag elmagyarázza, mi történik közben, és minden lépés pontosan megmutatja a másolandó kódot.
Négy lépés a nullától a kiadásig
- Az első komponensed (~5 perc) – válaszd ki lent a keretrendszeredet, szerezd meg a kódot, és jeleníts meg egy Buttont.
- Összeállítás és stílusozás (~5 perc) – építs egy címkézett űrlapot, és stílusozd a kebab-case osztályhorgokra (minden keretrendszer-oktatóanyag része).
- Adj neki témát (~15 perc) – cseréld le a kézzel írt CSS-edet az 57 kész téma egyikére, majd hagyd, hogy a felhasználók futásidőben váltsanak: témázási oktatóanyag.
- Tartsd tiszteletben a beállításokat (~15 perc) – adj hozzá nyelv- és szövegméret-választást a beállítássegédekkel: segédek oktatóanyaga.
Válaszd ki a keretrendszeredet
HTML
Másold a szemantikus HTML-t az osztályhorgokkal, és indulhatsz – egy böngésző és egy szerkesztő elég.
Svelte
Svelte 5 rúnák, snippetek és bind:value kétirányú kötés.
React
Függvénykomponensek value + onChange és a maradék tulajdonságok szétterítésével.
Vue
Vue 3 egyfájlos komponensek v-model támogatással.
Angular
Önálló Angular-komponensek signal-bemenetekkel és [(value)].
Blazor
Razor-komponensek paraméterekkel, ChildContentés bUnit-tesztekkel.
Nunjucks
Kiszolgálóoldalon renderelt makrók az Eleventyhez és bármely Node-sablonozási csővezetékhez.
Nem tudsz dönteni? Kezdd a HTML -lel – megtanítja az osztályhorog-szerződést, amelyet minden más keretrendszer megoszt, és közvetlenül fájlból fut.
Menj mélyebbre
Témázás
Linkeld be az 57 kész téma egyikét – NHS, GOV.UK, USWDS, világos, sötét és több – írd felül a saját CSS-eddel, és adj hozzá futásidejű témaváltást a theme-picker segéddel.
Beállítássegédek
Adj a felhasználóknak kontrollt a téma, a nyelv, a szövegméret, a mozgás, a keresés, az oldallinkek, a megosztás, valamint a dátum/idő megadása fölött a theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker és date-time-picker segítségével: fej nélküli vezérlők tartóssággal, SSR-biztonsággal és automatikus RTL-érzékeléssel.
Az oktatóanyagok után
- Böngészd a komponenskatalógust – minden komponens dokumentálja a tulajdonságait, az ARIA-szerződését és a billentyűzetes viselkedését.
- Klónozz egy példaalkalmazást , hogy mind az 571 komponenst stílusozva és együttműködve lásd – a CSS ugyanazokat az osztályhorgokat célozza, amelyeket az imént használtál, így másold át bármelyik részét a projektedbe, és igazítsd kedved szerint.
- Kérdésed van? A súgóoldalon válaszokat, GYIK-et és a barátságos emberekhez vezető utakat találsz. És ha egy oktatóanyag világosabb lehetne, szólj nekünk – szívesen javítjuk.