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 上提交议题或拉取请求。