一步一步学习 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 换成 57 个现成主题之一，然后让用户在运行时切换：主题教程。
尊重偏好（约 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 开始——伊讲授所有其伊框架共享个类钩子契约，并且可以直接从文件运行。

深入了解

主题

链接 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 安全以及自动从右到左检测个 headless 控件。

约 15 分钟

教程之后

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