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()

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.

ParametersTypeDefaultDescription
sizeLiteral['S', 'M', 'L'] |
None
'L'How thick the Divider should be.
orientationLiteral['horizontal', 'vertical']'horizontal'The axis the Divider should align with.