Divider widget

The Divider widget helps you improve page structure by adding a visual line that separates widgets into distinct groups to create a clear hierarchy.

Examples

Use this widget to support app design requirements such as the following:

  • You want to use line dividers to organize a page by grouping similar or related content and emphasizing a hierarchy.

Usage notes

When you add a Divider widget to the page, the default style is a thin black line. The Quick style window appears initially so you can select from preset styles. (To access this window again later, click the Quick style button Quick style on the widget’s toolbar.) You can also configure your own divider style in the widget settings.

Settings

The Divider widget includes the following settings:

  • Direction—Display the divider in a horizontal or vertical direction.
  • Color—Choose a color for the divider.
  • Stroke—Choose a line style such as solid, dashed, or double. Specify the line weight in pixels.
  • Start & End point—Optionally, choose a start and end point style from the menus. Drag the handle on the corresponding slider to increase the point size, which is relative to the stroke size you set. The start and end points are determined by the direction setting. For example, a vertical divider’s start point is at the top.