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