Learn about the Divider component: its characteristics, options, and common use.
After reading this article, you’ll know:
-
What the Divider component is and its major options
-
How to use the Divider component in your application
What is the Divider component?
The Divider component separates components from each other and creates a stronger definition in the segments of your layout. You could ultimately say that it is an enhancer for the layout components.
The sole purpose of the divider is to divide components from each other, from a small break of space to a big area in your page that needs an eye-catching line to showcase a difference.
Options
The Divider component is a plain out-of-the-box feature that has a few styling and spacing options. The first one is Thickness, allowing you to change the thickness of the divider line vertically, and doesn't change the divider's width.
Using the Color option you can change the color of the divider line and you can customise the spacing around the divider with the Outer space option.
Using the component
A divider is used to separate page segments. In your page layout design, you sometimes want to create a distinct line between items to make them appear more individually on your page. You can do so by adding a divider between segments.
As shown in the example above; due to the placement of the divider segment 1 looks like an individual item, whereas where segment 2 and segment 3 seem to be a group.
In the following example, we get an idea that segment 1, segment 2, and segment 3 are all individual items. And this is only because we added one line in our layout, a true game-changer!
Divider vs other components
The divider is a unique feature to assist your page layout, there isn't any component that would do quite the same. Only the List component allows you to select the divider as an option in its styling segment, which is the same one we are talking about right now, except build-in.
To make elements in your page appear as individual items, or to group other items together, you can use the divider to enhance your page layout.