Divider

Live demo

Renders a divider line.

Node name : divider

Attributes

Attribute	Type	Required	Default value	Description
orientation	string (horizontal, vertical)	false	horizontal	Defines divider line orientation.
color	string	false	true	The color of the divider line.
content-align	string (start, center, end)	false	center	The position of the inner content shown on top of the divider line.

Examples

Note

Please note that putting a vertical divider in an horizontal layout will lead to undefined behavior. Similarly, putting an horizontal divider in a vertical layout does not make sense either.

Horizontal divider in a vertical layout

<vertical-layout>
	<text>Content 1.</text>
	<divider />
	<text>Content 2.</text>
</vertical-layout>

Vertical divider in an horizontal layout

<horizontal-layout>
	<text>Content 1.</text>
	<divider orientation="vertical" />
	<text>Content 2.</text>
</horizontal-layout>

Divider with content

The divider can show a piece of content in the middle of the line.

<divider><text>Divider</text></divider>

Divider with aligned content

The divider can show a piece of content on the left or right hand side of the line.

If the divider acts as a title decoration, you might want to include a margin above it.

<divider content-align="start" layout:margin="medium none none none">
    <heading level="4">
        @Resources.MyModule.MyTitle
    </heading>
</divider>

Customization

Application themes

Themes provide a way to customize all the dividers of the application via the following properties:

• Color: the color of the line
• HorizontalDividerMargin: top/bottom margin to use on horizontal dividers
• VerticalDividerMargin: left/right margin to use on vertical dividers

Template attributes

The divider can also be provided a color directly in the template:

<divider color="DarkSlateBlue" />