一步一步學 Lily

歡迎!每個教學都由零開始,搭建同一樣細嘢 — 一個無障礙而有樣式嘅表單 — 大約 10 分鐘,等你可以公平咁比較各個框架。之後再深入主題同使用者偏好。

開始之前

你需要嘅嘢少得令人驚訝:

HTML 教學 — 淨係一個瀏覽器同一個文字編輯器。呢個就係成套工具。
Svelte、React、Vue、Angular 或 Nunjucks — git、Node 26 同 pnpm 10 或以上。
Blazor — git 同 .NET SDK 8 或以上。

第一次接觸無頭元件?你嚟啱地方 — 每個教學都會一邊行一邊解釋發生緊乜事,每一步都會顯示要複製嘅準確程式碼。

四步由零到發佈

你第一個元件 (約 5 分鐘)— 喺下面揀你嘅框架,攞到程式碼,然後渲染一個 Button。
組合同加樣式 (約 5 分鐘)— 搭建一個有標籤嘅表單,並針對 kebab-case 類別掛鉤加樣式(每個框架教學嘅一部分)。
加主題 (約 15 分鐘)— 用 57 個現成主題之一取代你手寫嘅 CSS,然後讓使用者喺執行時切換: 主題教學.
尊重偏好 (約 15 分鐘)— 用偏好輔助工具加入語言同文字大細選擇: 輔助工具教學.

揀你嘅框架

HTML

複製帶有類別掛鉤嘅語義化 HTML 即可上路 — 一個瀏覽器同一個編輯器就夠。

約 10 分鐘 · 最簡單嘅起步

Svelte

Svelte 5 runes、snippets,同 bind:value 雙向綁定。

約 10 分鐘

React

函式元件加 value + onChange 同 rest-prop 展開。

約 10 分鐘

Vue

Vue 3 單檔案元件,支援 v-model 。

約 10 分鐘

Angular

Angular 獨立元件,配合 signal 輸入同 [(value)].

約 10 分鐘

Blazor

Razor 元件,附帶參數、 ChildContent,同 bUnit 測試。

約 10 分鐘

Nunjucks

為 Eleventy 同任何 Node 範本流程而設嘅伺服器端渲染巨集。

約 10 分鐘

唔知點揀?由 HTML 開始 — 佢教你所有其他框架共用嘅類別掛鉤合約,而且直接由檔案運行。

深入啲

主題

連結 57 個現成主題之一 — NHS、GOV.UK、USWDS、淺色、深色等等 — 用你自己嘅 CSS 覆蓋佢,並用 theme-picker 輔助工具加入執行時主題切換。

約 15 分鐘

偏好輔助工具

用 theme-picker、locale-picker、text-size-picker、motion-picker、search-picker、link-picker、share-picker 同 date-time-picker 畀使用者控制主題、語言、文字大細、動態、搜尋、頁面連結、分享同日期/時間輸入:附帶持久性、SSR 安全同自動 RTL 偵測嘅無頭控制項。

約 15 分鐘

教學之後

瀏覽元件目錄 — 每個元件都記錄咗佢嘅屬性、ARIA 合約同鍵盤行為。
複製一個範例應用程式睇吓全部 571 個元件加咗樣式並一齊運作 — CSS 針對你啱啱用過嘅同一批類別掛鉤,所以可以將任何部分複製入你嘅項目,隨意調整。
有問題? 幫助頁面有答案、常見問題,同聯絡一個友善嘅真人嘅方法。如果教學可以更清晰, 話畀我哋知 — 我哋好樂意改進。