分割线
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 );}
#
版本变化相比旧版分割线
- 新增支持分割线选择实线和虚线两种类型