Skip to main content

Divider

WdDivider

Applicable Scenarios​

Add a divider to the page, commonly used to distinguish layouts between components.

Basic Capabilities Description​

  1. The basic properties of the divider offer two style options: solid and dashed lines.

Extended Scenarios Description​

How to Adjust the Height and Color of the Divider​

Example

Flexibly adjust the divider's height and color.

Configuration Method

Add a divider component, open the code editor, and enter the following code in the page's style section:

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

The following figure shows the effect.

Note: If you want to modify the height and color of the divider in a single page, enter the above code in the page's style section. To adjust the height and color of all dividers in the application, enter the above code in the application's style section.

Example​

Interactive Preview​

Style API Custom Styles​

By setting the divider's custom style color to #0c0096, height to 5px, and width to 300px:

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

CSS Variables Custom Styles​

By setting CSS variables to customize styles, with height set to 2px, color set to black, and the divider's left and right margins set to 10px:

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

Properties​

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

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

默认值："solid"

Events​

无

Property API​

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

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

Method API​

无

Style 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 Variables​

.wd-divider {
  // Divider height
  --wd-divider-size-border: 1px;
  // Divider color
  --wd-divider-color-border: var(--wd-color-border-default);

  // Divider margin-top
  --wd-divider-margin-top: calc(var(--wd-space-base) * 4);
  // Divider margin-bottom
  --wd-divider-margin-bottom: calc(var(--wd-space-base) * 4);
  // Divider horizontal margin
  --wd-divider-margin-horizontal: var(--wd-divider-margin-top) 0 var(
      --wd-divider-margin-top
    );
}

Version Changes​

Compared to the legacy divider

  • Added support for two divider line types: solid and dashed.