Divider
Overview
A divider is a thin line that separates content helping to create visual grouped layouts.
Anatomy
The divider is an hr
tag that comprises of a styled border. It can flow horizontal or vertical.
The divider is set to be 100% of its container's corresponding width or height depending on the flow of the divider.
This means that if you want to restrain its size, you will need to wrap it in a container with the corresponding size.
Props
The divider has a number of props to facilitate a variety of uses. Custom and required props are detailed below:
{
stylePreset: "dividerHorizontal"
}
Playground
For more information on overriding component defaults, see the docs here.
Spacing
The divider does not apply any spacing presets. So in order to add space around it, you will need to wrap it in a corresponding Block or Stack component, then you can apply the spacing presets to the container. Here are a few examples to demonstrate the usages of a container elements to set spacings:
Note: The divider always stretches to 100% of the corresponding size of the container.
Using Block component
In this example, we are using the Block component
to add margin-bottom
to each element by using spaceStack: 'space020'
.
Also, we have a container StyledBlock
that has fixed width to restrain the divider's width.
It will provide us with the following structure:
In this example we have a horizontal layout of elements separated with vertical dividers.
Each element is wrapped inside a Block component that has a spacing preset
passed to set the margin-right
of each element.
The example will look like this:
Using Stack component
In this example we are using a wrapping Stack
component with spacing set to sizing030
.
When you need to use the Divider
inside a Stack
,
you will have to wrap it inside a StackChild
component
that has a property alignSelf={AlignSelfValues.Stretch}
passed to it.
This way the divider will automatically stretch to the size of the Stack container.
The same approach can be applied when using a horizontal Divider
inside a vertical Stack
layout.