Divider
Dividers help you bring rythm and clarity to your interfaces by separating elements. Separation of elements also comes in pair with the grouping of ones, thus a powerfull tool to raise your information architecture.
Sizes
The divider comes in three sizes. By default, the divider comes in medium size.
Small
Medium
Large
<Divider size="small"></Divider>
<Divider size="medium"></Divider>
<Divider size="large"></Divider>
Orientation
The divider can be used in two main directions: horizontal and vertical. By default, the divider comes in horizontal orientation.
Horizontal
Vertical
<Divider orientation="horizontal"></Divider>
<Divider orientation="vertical"></Divider>
Shape
The divider can be used in two main shapes: rounded and sharp. By default, the divider has a rounded border.
Rounded
sharp
<Divider shape="rounded"></Divider>
<Divider shape="sharp"></Divider>
Event handling
Not applicable. The Divider component is a static visual element and does not support any event handlers.
API
QtmDivider
| Property | Type | Default | Description |
|---|---|---|---|
| classes | string | list of classes to override or extend the styles applied to the component. You can use available utility classes by importing | |
| orientation | "horizontal" | "vertical" | 'horizontal' | The orientation of the divider |
| shape | "rounded" | "sharp" | 'rounded' | The shape of the divider |
| size | "large" | "medium" | "small" | 'medium' | The size of the divider |