codecamp

分隔线

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

调用方式

分隔线使用纯 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，免费阅读超1000+编程语言教程

取消

确定

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }