Divider
Dividers are used to visually separate or group elements.
Divider()()Examples
Width
Use the --width custom property to change the width of the divider.
Divider( _.style := "--width: 4px;" )()Color
Use the --color custom property to change the color of the divider.
Divider( _.style := "--color: tomato;" )()Spacing
Use the --spacing custom property to change the amount of space between the divider and it's neighboring elements.
div( textAlign.center, "Above", Divider( _.style := "--spacing: 2rem;" )(), "Below")Orientation
The default orientation for dividers is horizontal. Set orientation attribute to vertical to draw a vertical divider. The divider will span the full height of its container.
div( display.flex, alignItems.center, "First", Divider( _.orientation.vertical )(), "Middle", Divider( _.orientation.vertical )(), "Last")Dropdown Dividers
Use dividers in dropdowns to visually group dropdown items.
Dropdown( _.slots.trigger( Button( _.withCaret := true )("Menu") ), _.style := "max-width: 200px;" )( DropdownItem( _.value := "1" )("Option 1"), DropdownItem( _.value := "2" )("Option 2"), DropdownItem( _.value := "3" )("Option 3"), Divider()(), DropdownItem( _.value := "4" )("Option 4"), DropdownItem( _.value := "5" )("Option 5"), DropdownItem( _.value := "6" )("Option 6"))