Vertical Divider
The Vertical Divider widget is a vertical line that is used to visually separate widgets. For example, you could use it when displaying a list of items that have multiple columns of information or to separate a navigation bar from the content of a page, etc.
Vertical Divider
Here's how you add the Vertical Divider widget to your project:
Adding Vertical Divider widget
You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
To change the width and thickness of the Vertical Divider:
- 1.Select the Vertical Divider widget > move the Properties Panel > Divider Properties.
- 2.Find the Width property and enter the value to change the overall width.
- 3.Now, find the Thickness property (next to the Width property) and enter the value.
Changing width and thickness
To customize the divider style, select the Vertical Divider widget > move the Properties Panel > Divider Properties > choose the Line Style.
This property accepts one of the following values:
- Solid: creates a solid line.
- Dotted: creates a dotted line.
- Dashed: creates a dashed line.
- Dashdotted: creates a pattern of alternate dashes and dots.
Choosing line style
To change the color, select the Vertical Divider widget > move the Properties Panel > Divider Properties > use the Color property.
Changing the color
Sometimes you might want to add a little padding around Vertical Divider. Using the Indent and End-Indent properties, you can add top and bottom padding.
To add top and bottom padding:
- 1.Select the Vertical Divider widget > move the Properties Panel > Divider Properties.
- 2.Find the Indent property and enter the value. This will add top padding.
- 3.Similarly, set the End-Indent property to add the bottom padding.
Adjust top and bottom padding
To control the height of the divider, select the Vertical Divider widget > move the Properties Panel > Divider Properties > use the Height property.
Controlling height
Last modified 2mo ago