Skip to main content
Supported Regions:上海

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​

External properties received by the component

Property Name
Property Identifier
Type
Description
风格typestring

Default value: "solid"

Events​

None

Property API​

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name
Property Identifier
Type
Description
风格typestring

Method API​

None

Style API​

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name
Class Name
Description and Examples
根元素.wd-divider分割线组件根元素
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-divider {
  /* Write CSS styles here */
}
PC 端分割线根元素.wd-pc-divider可以为 PC 端的分割线编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-divider {
  /* Write CSS styles here */
}
H5 端分割线根元素.wd-h5-divider可以为 H5 端的分割线编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-divider {
  /* Write CSS styles here */
}
小程序端分割线根元素.wd-mp-divider可以为小程序端的分割线编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-divider {
  /* Write CSS styles here */
}

Learn about Style 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.