一步一步学习 Lily

欢迎！每个教程都从零开始，用大约 10 分钟构建同一个小东西——一个无障碍且带样式的表单——这样你就能在同等条件下比较各个框架。然后再深入学习主题和用户偏好。

开始之前

你需要的东西少得出奇：

HTML 教程——只需要一个浏览器和一个文本编辑器。这就是全部工具。
Svelte、React、Vue、Angular 或 Nunjucks——git、Node 26 以及 pnpm 10 或更高版本。
Blazor——git 和 .NET SDK 8 或更高版本。

刚接触 headless 组件？你来对地方了——每个教程都会边做边解释发生了什么，每一步都给出可直接复制的准确代码。

从零到发布的四步

你的第一个组件（约 5 分钟）——在下方选择你的框架，获取代码，渲染一个按钮。
组合并设置样式（约 5 分钟）——构建一个带标签的表单，并依据 kebab-case 类钩子为它设置样式（每个框架教程的一部分）。
应用主题（约 15 分钟）——把你手写的 CSS 换成 45 个现成主题之一，然后让用户在运行时切换：主题教程。
尊重偏好（约 15 分钟）——用偏好辅助组件添加语言和文字大小选择：辅助组件教程。

选择你的框架

HTML

复制带有类钩子的语义化 HTML 就能开始——有浏览器和编辑器就够了。

约 10 分钟 · 最容易上手

Svelte

Svelte 5 runes、代码片段和 bind:value 双向绑定。

约 10 分钟

React

带有 value + onChange 并展开其余属性的函数组件。

约 10 分钟

Vue

支持 v-model 的 Vue 3 单文件组件。

约 10 分钟

Angular

带有信号输入和 [(value)] 的 Angular 独立组件。

约 10 分钟

Blazor

带有参数、ChildContent 和 bUnit 测试的 Razor 组件。

约 10 分钟

Nunjucks

适用于 Eleventy 和任何 Node 模板流水线的服务端渲染宏。

约 10 分钟

拿不定主意？从 HTML 开始——它讲授所有其他框架共享的类钩子契约，并且可以直接从文件运行。

深入了解

主题

链接 45 个现成主题之一——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 安全以及自动从右到左检测的 headless 控件。

约 15 分钟

教程之后

浏览组件目录——每个组件都记录了它的属性、ARIA 契约和键盘行为。
克隆一个示例应用，查看全部 571 个组件带样式并协同工作的样子——其 CSS 针对的正是你刚用过的那些类钩子，所以随意复制其中任何内容到你的项目里，并按需调整。
有疑问？帮助页面有答案、常见问题，以及联系友善真人的方式。如果某个教程可以更清楚，请告诉我们——我们乐意改进。