Divider
Dividers enhance layout clarity by grouping and separating nearby content, helping to establish structure and hierarchy.
Example
from deephaven import ui
@ui.component
def ui_divider_basic_example():
return ["Content above", ui.divider(), "Content below"]
my_divider_basic_example = ui_divider_basic_example()
Orientation
While aligned horizontally by default, the alignment of the divider can be set using the orientation prop.
from deephaven import ui
@ui.component
def ui_divider_orientation_example():
return ui.flex(
"Content before",
ui.divider(orientation="vertical"),
"Content after",
flex_grow=0,
)
my_ui_divider_orientation_example = ui_divider_orientation_example()
Sizing
The thickness of the divider can be set using the size prop.
from deephaven import ui
@ui.component
def ui_divider_size_example():
return ui.flex(
"Content below",
ui.divider(size="L"),
"Content above",
ui.divider(size="M"),
"More content above",
ui.divider(size="S"),
direction="column",
)
my_divider_size_example = ui_divider_size_example()
API reference
Dividers bring clarity to a layout by grouping and dividing content in close proximity.
Returns: Element The rendered divider element.
| Parameters | Type | Default | Description |
|---|---|---|---|
| size | Literal['S', 'M', 'L'] | None | 'L' | How thick the Divider should be. |
| orientation | Literal['horizontal', 'vertical'] | 'horizontal' | The axis the Divider should align with. |