分隔线

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

调用方式

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

色彩

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

相关阅读

Material Design 分隔线设计规范

样式

等屏宽分隔线

等屏宽分隔线会占据 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 类名列表