laikit UI
参考资料
简介
laikit UI 是一套 React 组件库，设计遵循统一、简约、现代，提供表单、布局、数据展示和内容展示组件。
组件提供 TypeScript 类型声明，通过 CSS 变量定制颜色、字体与间距，支持浅色、深色主题和多语言文案。路由与标题组件可通过 LaikitProvider 接入应用所用的框架。
组件库采用 MIT 许可证，npm 包名为 @lailai0916/ui。这组文档对应 0.2 系列 API。
文档导航
| 文档 | 内容 |
|---|---|
| 快速开始 | 安装、样式导入、最小应用 |
| 按钮与表单 | 按钮、选择、滑块、开关与输入字段 |
| 布局与卡片 | 页面容器、排列、面板与卡片 |
| 数据展示 | 图表、进度、加载与异常状态 |
| 内容展示 | 头像、徽标、窗口、引用与分页 |
| 主题定制 | 主题变量、浅色与深色、主题控件 |
| 框架接入 | 路由、语言、服务端渲染、Hooks |
组件清单
0.2 系列共有 42 个 UI 组件。以下按独立导出计数，Tooltip.Label、Tooltip.Value 等子部件不重复计数；Provider、Hooks、路由适配和工具函数不计入。
| 分类 | 数量 | 组件 |
|---|---|---|
| 按钮与表单 | 8 | Button、IconButton、Segmented、Slider、Switch、TextField、TextAreaField、SelectField |
| 布局与卡片 | 15 | Card、TitleCard、LinkCard、DataCard、ShareCard、PageHeader、PageTitle、PageContent、PageContainer、Stack、Cluster、Panel、PanelHeader、PanelBody、PanelFooter |
| 数据展示 | 5 | Chart、Donut、Progress、DataState、Skeleton |
| 内容展示 | 13 | Avatar、Brand、Badge、IconBlock、Tooltip、TrafficLights、WindowBar、WindowPanel、MDTitle、Quote、GitHub、EmptyState、Paginator |
| 主题控件 | 1 | ThemeControl |
环境与接入
- 应用需要 React 与 React DOM，支持 React 18.3.1 或 19；包提供 ESM 与 TypeScript 声明。
- JavaScript 可由打包器移除未使用模块；共享样式文件包含整套组件样式。
- 图表接收应用传入的数据；
GitHub卡片会请求公开仓库信息，Iconify 图标可能发起网络请求。 - 组件样式使用 CSS Modules，主题通过
--lk-*变量定制。优先使用公开属性与变量，避免依赖生成的类名。