Matutunan ang Lily, hakbang-hakbang
Maligayang pagdating! Nagsisimula sa wala ang bawat tutorial at binubuo ang parehong maliit na bagay — isang accessible at may istilong form — sa humigit-kumulang 10 minuto, para maikumpara mo ang mga framework nang patas. Pagkatapos ay lumalim sa theming at mga preference ng user.
Bago ka magsimula
Kakaunti lang ang kailangan mo:
- Para sa HTML na tutorial — browser at text editor lang. Iyon na ang buong toolkit.
- Para sa Svelte, React, Vue, Angular, o Nunjucks — git, Node 26, at pnpm 10 o mas bago.
- Para sa Blazor — git at ang .NET SDK 8 o mas bago.
Bago sa mga headless na component? Nasa tamang lugar ka — ipinaliliwanag ng bawat tutorial ang nangyayari habang sumusulong ka, at ipinapakita ng bawat hakbang ang eksaktong code na kokopyahin.
Apat na hakbang mula sa wala hanggang sa pag-ship
- Ang una mong component (~5 minuto) — piliin ang iyong framework sa ibaba, kunin ang code, at i-render ang isang Button.
- Buuin at bigyan ng istilo (~5 minuto) — bumuo ng form na may label at bigyan ito ng istilo laban sa mga kebab-case na class hook (bahagi ng bawat tutorial ng framework).
- Lagyan ng tema (~15 minuto) — palitan ang iyong sulat-kamay na CSS ng isa sa 57 handa nang tema, pagkatapos ay hayaang magpalit ang mga user sa runtime: tutorial sa theming.
- Igalang ang mga preference (~15 minuto) — magdagdag ng pagpili ng wika at laki ng teksto gamit ang mga preference helper: tutorial sa mga helper.
Piliin ang iyong framework
HTML
Kopyahin ang semantic HTML na may mga class hook at umandar — sapat na ang browser at editor.
Svelte
Mga rune ng Svelte 5, snippet, at bind:value two-way binding.
React
Mga function component na may value + onChange at rest-prop spread.
Vue
Mga single-file component ng Vue 3 na may suporta sa v-model .
Angular
Mga standalone component ng Angular na may signal input at [(value)].
Blazor
Mga Razor component na may mga parameter, ChildContent, at mga pagsusuri ng bUnit.
Nunjucks
Mga macro na nire-render sa server para sa Eleventy at anumang Node templating pipeline.
Hindi makapili? Magsimula sa HTML — itinuturo nito ang kontrata ng class hook na pinagsasaluhan ng lahat ng ibang framework, at tumatakbo ito diretso mula sa isang file.
Lumalim pa
Theming
Mag-link ng isa sa 57 handa nang tema — NHS, GOV.UK, USWDS, maliwanag, madilim, at iba pa — i-override ito gamit ang sarili mong CSS, at magdagdag ng runtime na pagpapalit ng tema gamit ang theme-picker helper.
Mga preference helper
Bigyan ang mga user ng kontrol sa tema, wika, laki ng teksto, galaw, paghahanap, mga link ng pahina, pagbabahagi, at pagpasok ng petsa/oras gamit ang theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker, at date-time-picker: mga headless na kontrol na may persistence, kaligtasan sa SSR, at awtomatikong pagtukoy ng RTL.
Pagkatapos ng mga tutorial
- Mag-browse sa catalog ng component — idinodokumento ng bawat component ang mga prop, kontrata ng ARIA, at gawi ng keyboard nito.
- I-clone ang isang halimbawang app para makita ang lahat ng 571 component na may istilo at gumagana nang magkakasama — tinututukan ng CSS ang parehong class hook na ginamit mo lang, kaya kopyahin ang anumang bahagi nito sa proyekto mo at ayusin ayon sa gusto mo.
- May mga tanong? Ang pahina ng tulong ay may mga sagot, FAQ, at paraan para makontak ang isang magiliw na tao. At kung maaaring maging mas malinaw ang isang tutorial, sabihin sa amin — masaya naming pagbubutihin ito.