分割线
WdDivider
适用场景#
为页面添加一条分割线，常用于组件之间的布局区分。
基础能力说明#
- 分割线的基础属性提供实线和虚线两种样式风格供选择
扩展场景说明#
如何调整分割线的高度和颜色#
示例
灵活调整定义分割线的高度和颜色
配置方法
添加一个分割线组件，打开代码编辑器，在页面的 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 | 可以为小程序端的分割线编写样式 |
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 );}版本变化#
相比旧版分割线
- 新增支持分割线选择实线和虚线两种类型