分隔线

2018-05-24 18:58 更新

分割线用于管理和分隔列表和页面布局中的内容,以便让内容生成更好的视觉效果及空间感。

调用方式

分隔线使用纯 CSS 编写,只需编写 HTML 代码即可生效。

色彩

  • 深色分隔线,用于浅色背景
  • 浅色分隔线,用于深色背景
  • 自动调整颜色的分隔线,会根据页面主题自动调整为深色或浅色


相关阅读

Material Design 分隔线设计规范


样式

等屏宽分隔线

等屏宽分隔线会占据 100% 的宽度。可以使用的类名包括:

  • mdui-divider:在默认主题下为深色,在深色主题下为浅色。
  • mdui-divider-light:浅色的分割线,用在深色背景上。
  • mdui-divider-dark:深色的分割线,用在浅色背景上。

www.mdui.org - 等屏宽分隔线

<div class="mdui-divider"></div>


内凹分隔线

内凹分隔线距离左侧有 72px 的距离,经常用在有头像或图标的列表中。可以使用的类名包括:

  • mdui-divider-inset:在默认主题下为深色,在深色主题下为浅色。
  • mdui-divider-inset-light:浅色的分割线,用在深色背景上。
  • mdui-divider-inset-dark:深色的分割线,用在浅色背景上。

www.mdui.org - 内凹分隔线

<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 定义深色的内凹分隔线,用于浅色背景。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号