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 应用中引用该项目（或复制搿眼文件），并在
_Imports.razor 中添加 @using LilyBlazorHeadless.Components。
第 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 已验证：早期草稿在 Field 里嵌套了单独个 Label 组件，结果渲染出两个标签（其中一个为空），因为 Field
已经会根据 Label 参数渲染自己个标签——这是通过检查组件源码发现个；Form 本身呒没
Label 参数，所以早期草稿中 <Form> 个用法已被改正为勿写该参数，而不是凭空编造一个并勿存在个属性。
联系表单组合路由
采用同样个模式，并经过真实个端到端测试搭 axe 测试。
检查侬个成果：运行应用，表单看起来老朴素——这正是预期：样式还在后面。按下 Tab：焦点会依次经过每个控件，标签会被朗读，提交也能正常工作。行为已经完成；外观由侬决定，这就是下一步。
第 4 步——添加样式
在 app.css 中为搿眼类名钩子设置样式——.button、.text-input、
.label、.field——或者在 App.razor /
index.html 中链接一个现成个主题：
<link rel="stylesheet" href="themes/wireframe.css" />第 5 步——看看伊个完整效果
Blazor Web 示例应用展示完整目录个带样式演示版本，带有 Playwright 端到端测试：
git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-blazor-web-examples
dotnet run --project src/LilyBlazorWebExamples