Separator

WdDivider

Applicable Scenarios

Adding a divider to the page is commonly used to visually separate components.

Basic Capabilities Description

1. The basic properties of the divider provide two style types: solid and dashed for selection.

Extended Scenarios Description

How to Adjust the Height and Color of the Divider

Example

Flexibly adjust the height and color of the defined divider.

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 a divider on 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 color of the divider's custom style 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 for custom styles, with a height of 2px, color set to black, and left and right margins of 10px for the divider:

#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

style

type

string

Default value: "solid"

Events

None

Properties 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

style

type

string

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

root element	.wd-divider	separator component root element /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-divider { /* Write CSS styles here */ }
PC-side separator root element	.wd-pc-divider	Can write style for PC split line /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-pc-divider { /* Write CSS styles here */ }
H5 separator root element	.wd-h5-divider	Can write style for H5 split line /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-h5-divider { /* Write CSS styles here */ }
WeChat Mini Program separator root element	.wd-mp-divider	Can write styles for the separator in the mini program /* :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 old version divider

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