36 lines
2.2 KiB
Markdown
36 lines
2.2 KiB
Markdown
# 预设样式
|
||
|
||
VEUI 组件通过 `ui` 属性为组件提供预设样式。不同主题包可以为每个组件提供不同的 `ui` 值进行扩展，用户也可以自定义 `ui` 值及其样式来给 VEUI 组件扩展预设样式。
|
||
|
||
### `ui` 属性
|
||
|
||
`ui` 属性是一个空格分隔的字符串，类似 HTML 原生的 `class` 属性。其中每一项都代表组件的一种预设样式，像下面的例子中，`primary` 和 `large` 都定义了 `<veui-button>` 组件的某个预设样式：
|
||
|
||
```html
|
||
<veui-button ui="primary large">OK</veui-button>
|
||
```
|
||
|
||
:::tip
|
||
我们知道，许多组件库通常通过一些组件的枚举属性（prop）来提供预定义的样式，常见的比如 `shape` / `size` / `type` 等。
|
||
|
||
但根据我们设计的初衷，VEUI 应该尽量不绑定到特定的设计语言上（虽然组件生成的结构要完全和设计语言解耦是不太可能的）。如果采用预定义枚举属性的方式时需要新增一套主题，但在这套主题中某些有额外可选的样式没有在 VEUI 的组件上预留出枚举属性，就只能使用 `class` 来实现无感知地添加样式钩子了。
|
||
|
||
这时又会遇到 `class` 命名、前缀等一系列问题，所以我们干脆提供一个自定义属性 `ui` 并且输出到组件的 DOM 元素上，来实现语义更清晰、与组件逻辑解耦的预设样式。
|
||
:::
|
||
|
||
### 使用 DLS 主题
|
||
|
||
使用 [`veui-loader`](./veui-loader) 的相应配置，即可在 VEUI 中加载 `veui-theme-dls` 主题包。主题包为很多组件提供了不同维度的可选预设样式，可以参考每个组件对 `ui` 属性的说明来查阅组件支持的预设样式。
|
||
|
||
### 自定预设样式
|
||
|
||
新增自定义的 `ui` 项无需通过组件接口进行注册，只需要在样式文件中针对 `[ui~="..."]` 选择器添加相应样式即可。
|
||
|
||
比如：要为 `Button` 组件新增一个 `secondary` 的样式，只需为 `.veui-button[ui~="secondary"]` 编写样式就可以实现。
|
||
|
||
[[ demo src="/demo/ui.vue" ]]
|
||
|
||
### 自定义主题包
|
||
|
||
关于自定义主题包的开发，可以参考[高级 › 主题](../advanced/theming)来了解更多 VEUI 对主题包的约定接口以及更多自定义 `ui` 属性的高级方法。
|