辅助类
辅助类使用规则
- 给组件或自定义元素添加辅助类,以快速定义样式。
- 如需直接将类名添加到
PureUi组件或自定义组件上,请在mainfest.json中开启mergeVirtualHostAttributes特性。
辅助类前缀
- 所有辅助类的前缀都是
pure-。 - 例如:
pure-hover。 PureUi组件辅助类的命名规则是pure-+组件名+-+名称。- 例如:
pure-button-primary。
辅助类列表
全局
| 类名 | 说明 | 版本 |
|---|---|---|
pure-hover | hover-class | +1.0.0 |
pure-disabled | 禁用状态 | +1.0.0 |
pure-text-left | 文字左对齐 | +1.0.0 |
pure-text-center | 文字居中对齐 | +1.0.0 |
pure-text-right | 文字右对齐 | +1.0.0 |
pure-text-justify | 文字两端对齐 | +1.0.0 |
pure-border | 全部边框 | +1.0.0 |
pure-border-top | 上边框 | +1.0.0 |
pure-border-bottom | 下边框 | +1.0.0 |
pure-border-left | 左边框 | +1.0.0 |
pure-border-right | 有边框 | +1.0.0 |
pure-underline | 下划线 | +1.0.0 |
pure-hide-scrollbar | 隐藏滚动条 | +1.0.0 |
pure-line-{1-10} | 超出行数，显示行尾省略号，最多10行 | +1.0.0 |
pure-animate-spin | 旋转动画 | +1.0.0 |
徽标 Badge
| 类名 | 说明 | 版本 |
|---|---|---|
pure-badge-primary | 主题-主要 | +1.0.0 |
pure-badge-success | 主题-成功 | +1.0.0 |
pure-badge-danger | 主题-危险 | +1.0.0 |
pure-badge-warning | 主题-警告 | +1.0.0 |
pure-badge-info | 主题-信息 | +1.0.0 |
pure-badge-light | 浅化背景 | +1.0.0 |
pure-badge-border | 边框 | +1.0.0 |
按钮 Button
| 类名 | 说明 | 版本 |
|---|---|---|
pure-button-primary | 主题-主要按钮 | +1.0.0 |
pure-button-success | 主题-成功按钮 | +1.0.0 |
pure-button-danger | 主题-危险按钮 | +1.0.0 |
pure-button-warning | 主题-警告按钮 | +1.0.0 |
pure-button-info | 主题-信息按钮 | +1.0.0 |
pure-button-block | 块级按钮 | +1.0.0 |
pure-button-round | 圆角按钮 | +1.0.0 |
pure-button-square | 方形按钮 | +1.0.0 |
pure-button-plain | 朴素按钮 | +1.0.0 |
pure-button-light | 浅化背景的按钮 | +1.0.0 |
pure-button-reversal | 反转按钮 | +1.0.0 |
pure-button-link | 链接按钮 | +1.0.0 |
pure-button-underline | 下划线按钮 | +1.0.0 |
单元格 Cell
| 类名 | 说明 | 版本 |
|---|---|---|
pure-cell-rotate | 让单元格右侧箭头旋转90deg | +1.0.0 |
多选框 Radio
| 类名 | 说明 | 版本 |
|---|---|---|
pure-checkbox-primary | 主题-主要 | +1.0.0 |
pure-checkbox-success | 主题-成功 | +1.0.0 |
pure-checkbox-danger | 主题-危险 | +1.0.0 |
pure-checkbox-warning | 主题-警告 | +1.0.0 |
pure-checkbox-info | 主题-信息 | +1.0.0 |
pure-checkbox-light | 浅化背景 | +1.0.0 |
pure-checkbox-circle | 圆形 | +1.0.0 |
pure-checkbox-reversal | 反转 | +1.0.0 |
pure-checkbox-block | 块状 | +1.0.0 |
pure-checkbox-border-none | 无边框 | +1.0.0 |
超链接 Link
| 类名 | 说明 | 版本 |
|---|---|---|
pure-link-primary | 主题-主要 | +1.0.0 |
pure-link-success | 主题-成功 | +1.0.0 |
pure-link-danger | 主题-危险 | +1.0.0 |
pure-link-warning | 主题-警告 | +1.0.0 |
pure-link-info | 主题-信息 | +1.0.0 |
加载 Loading
| 类名 | 说明 | 版本 |
|---|---|---|
pure-loading-column | 纵向布局 | +1.0.0 |
滚动通知 NoticeBar
| 类名 | 说明 | 版本 |
|---|---|---|
pure-notice-bar-primary | 主题-主要 | +1.0.0 |
pure-notice-bar-success | 主题-成功 | +1.0.0 |
pure-notice-bar-danger | 主题-危险 | +1.0.0 |
pure-notice-bar-warning | 主题-警告 | +1.0.0 |
pure-notice-bar-info | 主题-信息 | +1.0.0 |
pure-notice-bar-align-top | 顶部对齐 | +1.0.0 |
pure-notice-bar-line-{1-10} | 行数，超出显示省略号，最大十行 | +1.0.0 |
遮罩层 Overlay
| 类名 | 说明 | 版本 |
|---|---|---|
pure-overlay-left-top | 内容显示在左上 | +1.0.0 |
pure-overlay-left-center | 内容显示在左中 | +1.0.0 |
pure-overlay-left-bottom | 内容显示在左下 | +1.0.0 |
pure-overlay-center-top | 内容显示在中上 | +1.0.0 |
pure-overlay-center-center | 内容显示在中中 | +1.0.0 |
pure-overlay-center-bottom | 内容显示在中下 | +1.0.0 |
pure-overlay-right-top | 内容显示在右上 | +1.0.0 |
pure-overlay-right-center | 内容显示在右中 | +1.0.0 |
pure-overlay-right-bottom | 内容显示在右下 | +1.0.0 |
弹出层 Popup
| 类名 | 说明 | 版本 |
|---|---|---|
pure-popup-left | 从左侧弹出内容 | +1.0.0 |
pure-popup-right | 从右侧弹出内容 | +1.0.0 |
pure-popup-top | 从顶部弹出内容 | +1.0.0 |
pure-popup-bottom | 从底部弹出内容 | +1.0.0 |
pure-popup-center | 从中间弹出内容 | +1.0.0 |
pure-popup-close-left | 关闭按钮在左侧 | +1.0.0 |
pure-popup-close-right | 关闭按钮在右侧 | +1.0.0 |
pure-popup-close-top | 关闭按钮在上方 | +1.0.0 |
pure-popup-close-bottom | 关闭按钮在下方 | +1.0.0 |
单选框 Radio
| 类名 | 说明 | 版本 |
|---|---|---|
pure-radio-primary | 主题-主要 | +1.0.0 |
pure-radio-success | 主题-成功 | +1.0.0 |
pure-radio-danger | 主题-危险 | +1.0.0 |
pure-radio-warning | 主题-警告 | +1.0.0 |
pure-radio-info | 主题-信息 | +1.0.0 |
pure-radio-light | 浅化背景 | +1.0.0 |
pure-radio-square | 方形 | +1.0.0 |
pure-radio-reversal | 反转 | +1.0.0 |
pure-radio-block | 块状 | +1.0.0 |
pure-radio-border-none | 无边框 | +1.0.0 |
开关选择器 Switch
| 类名 | 说明 | 版本 |
|---|---|---|
pure-switch-primary | 主题-主要 | +1.0.0 |
pure-switch-success | 主题-成功 | +1.0.0 |
pure-switch-danger | 主题-危险 | +1.0.0 |
pure-switch-warning | 主题-警告 | +1.0.0 |
pure-switch-info | 主题-信息 | +1.0.0 |
标签 Tabs
| 类名 | 说明 | 版本 |
|---|---|---|
pure-tabs-equal | 等分布局 | +1.0.0 |
pure-tabs-justify | 两端对齐布局 | +1.0.0 |
pure-tabs-wrap | 换行/多行布局 | +1.0.0 |
标签 Tag
| 类名 | 说明 | 版本 |
|---|---|---|
pure-tag-primary | 主题-主要 | +1.0.0 |
pure-tag-success | 主题-成功 | +1.0.0 |
pure-tag-danger | 主题-危险 | +1.0.0 |
pure-tag-warning | 主题-警告 | +1.0.0 |
pure-tag-info | 主题-信息 | +1.0.0 |
pure-tag-light | 浅化背景 | +1.0.0 |
pure-tag-border | 边框 | +1.0.0 |
pure-tag-round | 圆角标签 | +1.0.0 |
pure-tag-plain | 朴素标签 | +1.0.0 |