Lily 是什么？

简短版本

Lily 是一个网页组件目录，每个组件都以八种 headless 形式实现（HTML、Svelte、React、Vue、Angular、Blazor、Nunjucks 和 Web Components），另附一组开箱即用的完整示例应用，演示如何为它们设置样式。

headless 版本完全不含 CSS。它们为你提供语义化 HTML、ARIA 角色与状态、键盘支持，以及便于国际化的属性。视觉设计由你来负责。

设计原则

无障碍

每个组件都从语义化 HTML 出发。只有在单靠 HTML 无法表达某种模式时才叠加 ARIA。组件以 WCAG 2.2 AAA 为目标，颜色、间距、焦点和键盘导航都在考虑之列。

可组合

Lily 偏爱小而单一用途、可以相互拼接的组件。复合模式反复出现：

• Nav → List → ListItem — 用于面包屑、目录列表、手风琴菜单、树形菜单和分页
• Form → Field → Input — 用于任何带有标签、提示和错误信息的表单布局
• Table → Head/Body/Foot → Row → Data — 用于表格、日历、甘特图和看板
• Bar → BarButton — 用于工具栏、标签栏、任务栏、操作栏和菜单栏
• Picker → PickerButton — 用于颜色选择器、评分选择器和主题选择器

可国际化

没有任何一条面向用户的字符串被硬编码。标签、占位符、错误消息、按钮文字，全部都是参数。接入你自己的翻译系统，Lily 就会说你所说的任何语言。

Headless

headless 组件没有 CSS，没有 <style> 块，也没有你未主动选用的设计令牌。它们在每个根元素上只暴露一个 kebab-case 类名，方便你以任何方式作为目标——语义化 CSS、Tailwind、CSS-in-JS，由你决定。

开箱即用的示例

示例应用展示如何为真实使用场景设置组件样式——该设定哪些设计令牌、添加哪些变体、如何组合页面。它们是完整的 SvelteKit、Next.js、Nuxt、Blazor 和 Eleventy 应用，而不只是沙盒。

灵感来源

Lily 的模式与语言取自一批刻意选得很广的设计系统：

• NHS UK 设计系统
• GOV.UK 设计系统
• 美国网页设计系统（USWDS）
• ONSdigital 设计系统
• Design System AU（澳大利亚政府）
• Mozilla Protocol
• Adobe Spectrum
• Ant Design
• Wonderflow Wanda
• DaisyUI
• shadcn/ui
• 路透社图形组件

许可证

Lily 采用多重许可：BSD、MIT、Apache-2.0、GPL-2.0 或 GPL-3.0。请选择适合你项目的许可证。如果都不合适，请联系我们。

联系方式

项目负责人：Joel Parker Henderson — joel@joelparkerhenderson.com。

发现了缺陷、有想法，或想贡献一个组件？请在 GitHub 上提交议题或拉取请求。