Component Divider

Divider

A horizontal or vertical divider line.

Divider is a visual separator that spans the available space.

When to use

• Separating groups in lists or forms
• Splitting panes/sections visually

Example

use yororen_ui::component::divider;

let horizontal = divider();
let vertical = divider().vertical(true);

API

• divider(): constructor
• vertical(bool): switch between horizontal (default) and vertical

Notes

• Horizontal divider uses h(px(1.)) + w_full().
• Vertical divider uses w(px(1.)) + h_full().

Defaults

• Color: theme.border.divider

Example: Vertical divider in a toolbar

use gpui::div;
use yororen_ui::component::{button, divider};

let toolbar = div()
    .flex()
    .items_center()
    .child(button().child("Left"))
    .child(divider().vertical(true))
    .child(button().child("Right"));