Blazor 教學
附參數嘅 Razor 類別庫元件、 ChildContent
渲染片段、屬性展開,同每個元件一個 bUnit 測試。
你會建立啲乜
一個細細個嘅聯絡表單 — 有標籤嘅輸入欄、提交按鈕、
@bind-Value 綁定、真實嘅鍵盤同螢幕閱讀器行為 — 先裸奔,再加樣式,大約 10 分鐘。
開始之前
你需要 git 同 .NET SDK 8 或以上。任何 Blazor 項目都得 — Blazor Web App、Server 或者 WebAssembly。
步驟 1 — 攞到程式碼
git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-blazor-headless
dotnet build
dotnet test # bUnit — 1,400+ cases across the catalog
元件放喺 src/LilyBlazorHeadless/Components/ —
Button.razor, TextInput.razor — 每個一個 Razor 檔案。從你嘅 Blazor 應用程式引用該項目(或者複製檔案),然後將 @using LilyBlazorHeadless.Components 加入
_Imports.razor.
步驟 2 — 你第一個元件
<Button OnClick="Save">Save</Button>
渲染成 <button class="button">。共用嘅參數慣例: Label (一個 aria-label 覆蓋),
CssClass (附加到基礎掛鉤),
ChildContent,同
[Parameter(CaptureUnmatchedValues = true)] 屬性展開,令任何額外嘅 HTML 屬性都可以傳過去。
步驟 3 — 組合一個細表單
<Form OnSubmit="HandleSubmit">
<Field Label="Full name" Required="true">
<TextInput Id="name" Label="Full name" @bind-Value="name" Required="true" />
</Field>
<Button Type="submit">Save</Button>
</Form>
@code {
private string name = "";
}
Field 將可見嘅 Label 當作佢自己嘅參數,而唔係嵌套嘅標籤元件 — 傳入一次,喺
Field,同 TextInput喺
Label 提供無障礙名稱。
2026-08-29 已驗證: 較早嘅草稿喺 Label 入面嵌套咗一個獨立嘅 Field元件,令佢渲染咗 兩個 標籤(其中一個係空嘅),因為 Field
已經由 Label 參數 — 檢查元件原始碼先發現; Form 本身冇 Label 參數,所以較早草稿入面
<Form> 嘅用法已經更正,將佢刪走,而唔係發明一個唔存在嘅屬性。
組合聯絡表單路由
係同一個模式,由真實嘅 e2e 同 axe 測試驗證過。
檢查你嘅成果: 運行應用程式,表單睇落好簡單 — 正如預期:樣式仲喺前面。按 Tab:焦點會移過每個控制項,標籤會被讀出,提交都運作。行為已經完成;外觀屬於你,而且係下一步。
步驟 4 — 加樣式
為類別掛鉤加樣式 — .button, .text-input,
.label, .field — 喺 app.css,或者喺 App.razor /
index.html:
<link rel="stylesheet" href="themes/wireframe.css" />步驟 5 — 睇晒佢運作
Blazor Web 範例應用程式 展示完整目錄嘅樣式同示範,附 Playwright e2e 測試:
git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-blazor-web-examples
dotnet run --project src/LilyBlazorWebExamples