Onu UI 是一个基于 UnoCSS 的原子化 UI 库，它不依赖于特定框架。
- 核心实现: 所有组件都是通过 UnoCSS 快捷方式实现的纯原子化 CSS 库。
- 性能: UnoCSS 会在匹配过程中缓存并最小化压缩，性能极高。
- 主题与颜色: Onu UI 支持动态主题，通过 Magicolor 生成符合人类视觉感知的一整套颜色系统,。默认主题色是随机的，可以通过
color选项配置主题色。 - 预设集成:
@onu-ui/preset内部集成了常用的 UnoCSS 预设，提供一站式解决方案：presetUno(): UnoCSS 默认预设。presetAttributify(): 属性化模式。presetIcons(): 图标预设。presetWebFonts(): Web 字体预设。
- 字体: 默认使用 DM Sans 字体，可通过
font-onu工具类应用。
核心组件参考
Avatar (头像)
描述: 头像描述。
| 配置类别 | UnoCSS 快捷方式/配置 | 描述 |
|---|---|---|
| 基础用法 | - | 基础头像。 |
| 大小 | - | 更改头像大小。 |
| 裁剪 | Clip | 裁剪样式。 |
| 状态 | avatar-online, avatar-offline | 显示在线或离线状态。 |
| 分组 | avatar-group | 用于分组多个头像。 |
| Vue 组件 | TODO |
Badge (徽章)
描述: 徽章描述。
| 配置类别 | UnoCSS 快捷方式/配置 | 描述 |
|---|---|---|
| 基础用法 | - | 基础徽章。 |
| 大小 | - | 更改徽章大小。 |
| 圆角 | rounded | 当内容为空时，徽章将默认为圆角。 |
| 颜色 | - | 更改徽章颜色。 |
| 组合 | - | 可以与其他组件组合使用，创建更复杂的徽章。 |
| Vue 组件 | TODO |
Button (按钮)
描述: 创建具有图标或链接能力的按钮。
| 配置类别 | UnoCSS 快捷方式/配置 | 描述 |
|---|---|---|
| 基础用法 | btn | 基础按钮,。 |
| 变体 | - | 更改按钮变体。 |
| 大小 | btn="~ sm" | 更改按钮大小,。 |
| 禁用 | btn disabled | 禁用按钮。 |
| 图标 | - | 支持带图标的按钮。 |
| 颜色 | - | 更改按钮颜色。 |
| Vue 组件 | <OButton> | Vue 组件标签,。 |
Input (输入框)
描述: 输入框描述。
| 配置类别 | UnoCSS 快捷方式/配置 | 描述 |
|---|---|---|
| 基础用法 | input-default | 默认不提供任何样式，允许完全自定义。 |
| 基础用法 | input | 提供一些基础样式。 |
| 大小 | - | 更改输入框大小。 |
| 禁用 | disabled | 禁用输入框。 |
| 颜色 | - | 更改输入框颜色。 |
| 组合 | - | 可以与其他组件组合使用。 |
| Vue 组件 | TODO |
Radio (单选框)
描述: 允许用户从一组选项中选择单个选项的表单控件。
| 配置类别 | UnoCSS 快捷方式/配置 | 描述 |
|---|---|---|
| 基础用法 | - | 基础单选框,。 |
| 颜色 | radio-<color> | 更改单选框的颜色。 |
| 大小 | radio-<size> | 更改单选框的大小。 |
| 禁用 | disabled | 禁用单选框。 |
| 形状 | circle 或 square | 更改单选框的形状，默认为 circle。 |
| Vue 组件 | <ORadio>, <ORadioGroup> | 用于在 Vue 中使用单选框的组件。 |
Switch (开关)
描述: 允许用户在“选中”和“未选中”之间切换的控件。
| 配置类别 | UnoCSS 快捷方式/配置 | 描述 |
|---|---|---|
| 基础用法 | - | 基础开关。 |
| 颜色 | switch-default | 内置主题色，用于活动状态（选中）。 |
| 颜色 | switch-anycolor | 用于自定义颜色。 |
| 大小 | `switch-xs | sm |
| 禁用 | disabled | 禁用开关。 |
| 组合 | - | 可以与其他组件组合使用。 |
| Vue 组件 | TODO |