menuMDUI文档
color_lens
near_me
开始使用
keyboard_arrow_down
layers
样式
keyboard_arrow_down
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down
基于 Material Design 3 和 Web Components 的 mdui 2 已发布,查看 mdui 2 开发文档

分隔线

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

调用方式

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

色彩

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

样式

等屏宽分隔线

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

  • mdui-divider:在默认主题下为深色,在深色主题下为浅色。
  • mdui-divider-light:浅色的分割线,用在深色背景上。
  • mdui-divider-dark:深色的分割线,用在浅色背景上。
Example
<div class="mdui-divider"></div>

内凹分隔线

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

  • mdui-divider-inset:在默认主题下为深色,在深色主题下为浅色。
  • mdui-divider-inset-light:浅色的分割线,用在深色背景上。
  • mdui-divider-inset-dark:深色的分割线,用在浅色背景上。
Example
<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定义深色的内凹分隔线,用于浅色背景。