HiUi 内置辅助样式类
HiUi 定义了一些基础的辅助样式类，方便开发者快速使用。
重要提示
因为头条小程序开启合并虚拟节点后，组件的事件会丢失响应，所以头条小程序未开启合并虚拟节点的配置，这就导致在头条小程序中，所有组件的上层会有个同名的虚拟节点，这时在使用辅助类时，辅助类的样式会直接添加到虚拟节点上，可能会导致达不到预期的效果，此时应手动给内部组件节点添加样式以实现预期效果。
此问题在 #5006 已经有反馈，但是官方一直没有解决。
| 类名 | 说明 |
|---|---|
hi-hover | 默认 hover-class 类 |
hi-disabled | 默认禁用状态类 |
hi-placeholder | 默认 placeholder 类 |
hi-line-(1-10) | 超出行数，自动显示行尾省略号，最多 10 行 |
hi-ani-spin | 旋转动画类 |
hi-radius | 小圆角 |
hi-round | 圆角 |
hi-circle | 圆 |
hi-block | 块状元素 |
hi-plain | 镂空 |
hi-hint | 浅化背景，此时元素背景为字体颜色的 0.2 透明度 |
hi-border | 边框 |
hi-border-top | 上边框 |
hi-border-bottom | 下边框 |
hi-border-left | 左边框 |
hi-border-right | 右边框 |
hi-border-solid | 实线边框 |
hi-border-dashed | 虚线边框 |
hi-border-dotted | 点状线边框 |
主题相关
为了方便使用主题，HiUi 定义了主题相关的辅助类。
主题可扩展，通过在 App.vue 中定义 $customThemes 变量来扩展主题。
scss
// 扩展的主题名称，需要写到 hi-ui 主样式前面
$customThemes: name1, name2, ...;
// 引入 hi-ui 主样式
@import "@/uni_modules/hi-ui/index.scss";
page {
// 对应的扩展主题变量的值
--hi-theme-name1: blue;
--hi-theme-name2: orange;
...
}| 类名 | 说明 |
|---|---|
hi-{主题名称} | 应用主题，此时元素背景会应用主题色，同时文字颜色变更为 #ffffff |
hi-bg-{主题名称} | 应用主题，只将主题应用到元素背景 |
hi-color-{主题名称} | 应用主题，只将主题应用到文本颜色 |
hi-border-{主题名称} | 应用主题，只将主题应用到边框颜色 |
HiUi 组件辅助样式说明
上方所有辅助样式可以添加到普通元素上，也可以添加到 HiUi 组件上，但因为 HiUi 组件内部已经有默认样式，所以添加到 HiUi 组件上的样式可能有部分不会生效，对此 HiUi 专门做了一些组件的优化，下方是已经优化了的 HiUi 组件。
button, badge, tag, movable-button, cell;
在对这些组件应用辅助类时，可以使用 hi-{组件名称}-xx 的形式，如：hi-button-${主题名称}、hi-button-round 等。