跳到主要内容

分割线

WdDivider

适用场景#

为页面添加一条分割线,常用于组件之间的布局区分。

基础能力说明#

  1. 分割线的基础属性提供实线和虚线两种样式风格供选择

扩展场景说明#

如何调整分割线的高度和颜色#

示例

灵活调整定义分割线的高度和颜色

配置方法

添加一个分割线组件,打开代码编辑器,在页面的 style 中输入如下代码:

:root .wd-divider {  border-color: #0c0096;  border-block-width: 5px;}

效果如下:

注:如果想要修改单个页面中分割线的高度和颜色,在页面的 style 中输入如上代码,如果想要调整应用中所有分割线的高度和颜色,在应用的 style 中输入如上代码即可

示例#

交互式预览#

样式 API 自定义样式#

通过设置分割线自定义样式的颜色为#0c0096,高度 5px,宽度 300px:

#wd-page-root .wd-divider {  border-color: #0c0096;  border-block-width: 5px;  width: 300px;}

CSS 变量自定义样式#

通过设置 CSS 变量自定义样式,高度 2px,颜色是黑色,分割线设置左右边距为 10px:

#wd-page-root .wd-divider {  --wd-divider-size-border: 2px;  --wd-divider-color-border: black;  --wd-divider-margin-horizontal: 10px 0;  width: 300px;}

属性#

组件接收的外部传入的属性

属性名
属性标识
类型
属性分组
默认值
说明
风格type"solid"|"dashed"基础属性"solid"-

事件#

属性 API#

通过属性 API,可以获取组件内部的状态和属性值

只读属性名
属性标识
类型
说明
风格type"solid"|"dashed"

方法 API#

样式 API#

通过样式 API,可以覆盖组件中内部元素的样式来实现自定义

名称
类名
说明
根元素.wd-divider分割线组件根元素
PC 端分割线根元素.wd-pc-divider可以为 PC 端的分割线编写样式
H5 端分割线根元素.wd-h5-divider可以为 H5 端的分割线编写样式
小程序端分割线根元素.wd-mp-divider可以为小程序端的分割线编写样式

了解样式 API

CSS 变量#

.wd-divider {  // 分割线高度  --wd-divider-size-border: 1px;  // 分割线颜色  --wd-divider-color-border: var(--wd-color-border-default);
  // 分割线的margin-top  --wd-divider-margin-top: calc(var(--wd-space-base) * 4);  // 分割线的margin-bottom  --wd-divider-margin-bottom: calc(var(--wd-space-base) * 4);  // 分割线水平方向的margin  --wd-divider-margin-horizontal: var(--wd-divider-margin-top) 0 var(      --wd-divider-margin-top    );}

版本变化#

相比旧版分割线

  • 新增支持分割线选择实线和虚线两种类型