跳到主要内容

分割线

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;
}

属性​

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

属性名
属性标识
类型
说明
风格typestring

默认值："solid"

事件​

无

属性 API​

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

只读属性名
属性标识
类型
说明
风格typestring

方法 API​

无

样式 API​

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称
类名
说明和示例
根元素.wd-divider分割线组件根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-divider {
  /* 在这里编写CSS 样式 */
}
PC 端分割线根元素.wd-pc-divider可以为 PC 端的分割线编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-divider {
  /* 在这里编写CSS 样式 */
}
H5 端分割线根元素.wd-h5-divider可以为 H5 端的分割线编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-divider {
  /* 在这里编写CSS 样式 */
}
小程序端分割线根元素.wd-mp-divider可以为小程序端的分割线编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-mp-divider {
  /* 在这里编写CSS 样式 */
}

了解样式 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
    );
}

版本变化​

相比旧版分割线

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