Skip to main content

Divider (ALPHA)

BusinessEnterprise
Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

The Divider widget draws a line that separates groups of content. A horizontal divider can show a short label in the middle of the line. The divider has no data and no events. Its color and thickness come from the app theme.

Widget type: WDS_DIVIDER_WIDGET

Divider widget in a Responsive app
Divider widget

Content properties​

These properties appear in the Content tab of the property pane.

General​

Orientation string​

Sets the direction of the line. Options: Horizontal (default), Vertical.

Values for code: horizontal, vertical.

Label string​

Shows text in the middle of the line, for example Section. The label shows on one line only. Leave it empty for a plain line.

This property shows only when Orientation is Horizontal. A vertical divider never shows a label.

Visible boolean​

Controls whether the widget is visible. Default: on.

Animate loading boolean​

Controls the loading animation of the widget. Default: on.

Style properties​

These properties appear in the Style tab of the property pane.

General​

Line style string​

Sets the style of the line. Options: Solid (default), Dashed, Dotted.

Values for code: solid, dashed, dotted.

Thickness string​

Sets the thickness of the line, based on the theme border widths. Options: S (default), M, L.

Values for code: small, medium, large.

Reference properties​

Reference properties let you read the widget's state in bindings and code, for example {{Divider1.isVisible}}. You cannot set them directly.

isVisible boolean​

Shows whether the widget is visible.

Example:

{{Divider1.isVisible}}

orientation string​

The direction of the line: horizontal or vertical.

Example:

{{Divider1.orientation}}

lineStyle string​

The style of the line: solid, dashed, or dotted.

Example:

{{Divider1.lineStyle}}

thickness string​

The thickness of the line: small, medium, or large.

Example:

{{Divider1.thickness}}

label string​

The label text on the line.

Example:

{{Divider1.label}}

Methods​

Methods let you change the widget's properties from code, for example in a JS Object.

setVisibility (param: boolean): Promise​

Shows or hides the widget.

Example:

Divider1.setVisibility(false)