分隔线
2018-05-24 18:58 更新
分割线用于管理和分隔列表和页面布局中的内容,以便让内容生成更好的视觉效果及空间感。
调用方式
分隔线使用纯 CSS 编写,只需编写 HTML 代码即可生效。
色彩
- 深色分隔线,用于浅色背景
- 浅色分隔线,用于深色背景
- 自动调整颜色的分隔线,会根据页面主题自动调整为深色或浅色
相关阅读
样式
等屏宽分隔线
等屏宽分隔线会占据 100% 的宽度。可以使用的类名包括:
- mdui-divider:在默认主题下为深色,在深色主题下为浅色。
- mdui-divider-light:浅色的分割线,用在深色背景上。
- mdui-divider-dark:深色的分割线,用在浅色背景上。
<div class="mdui-divider"></div>
内凹分隔线
内凹分隔线距离左侧有 72px 的距离,经常用在有头像或图标的列表中。可以使用的类名包括:
- mdui-divider-inset:在默认主题下为深色,在深色主题下为浅色。
- mdui-divider-inset-light:浅色的分割线,用在深色背景上。
- mdui-divider-inset-dark:深色的分割线,用在浅色背景上。
<div class="mdui-divider-inset"></div>
CSS 类名列表
类名 | 效果 |
.mdui-divider | 定义分隔线。在默认主题下为深色,在深色主题下为浅色。 |
.mdui-divider-light | 定义浅色的分隔线,用于深色背景。 |
.mdui-divider-dark | 定义深色的分隔线,用于浅色背景。 |
.mdui-divider-inset | 定义内凹分隔线。在默认主题下为深色,在深色主题下为浅色。 |
.mdui-divider-inset-light | 定义浅色的内凹分隔线,用于深色背景。 |
.mdui-divider-inset-dark | 定义深色的内凹分隔线,用于浅色背景。 |
以上内容是否对您有帮助:
← 浮动操作按钮
更多建议: