hstack

Stack items horizontally, in a row.

Combine with vstack to build a grid.

Usage

# Build a row of items
mo.hstack([mo.md("..."), mo.ui.text_area()])

# Build a row of items with equal width
mo.hstack([mo.md("..."), mo.ui.text_area()], widths="equal")

# Have one item stretch to fill the available space,
# while another fits its content
mo.hstack(
    [mo.plain_text("..."), mo.ui.text_area(full_width=True)],
    widths=[0, 1],
)

# Build a grid
mo.hstack(
    [
        mo.vstack([mo.md("..."), mo.ui.text_area()]),
        mo.vstack([mo.ui.checkbox(), mo.ui.text(), mo.ui.date()]),
    ]
)

Signature

mo.hstack(
    items: Sequence[object],
    *,
    justify: Literal["start", "center", "end", "space-between", "space-around"] = "space-between",
    align: Optional[Literal["start", "end", "center", "stretch"]] = None,
    wrap: bool = False,
    gap: float = 0.5,
    widths: Optional[Literal["equal"] | Sequence[float]] = None
) -> Html

Parameters

items · Sequence[object] · required

A list of items.

justify · Literal['start', 'center', 'end', 'space-between', 'space-around'] · default: "'space-between'"

Justify items horizontally: start, center, end, space-between, or space-around.

align · Optional[Literal['start', 'end', 'center', 'stretch']] · default: "None"

Align items vertically: start, end, center, or stretch.

wrap · bool · default: "False"

Wrap items or not.

gap · float · default: "0.5"

Gap between items as a float in rem. 1rem is 16px by default.

widths · Optional[Literal['equal'] | Sequence[float]] · default: "None"

"equal" to give items equal width; or a list of relative widths with same length as items, e.g., [1, 2] means the second item is twice as wide as the first; or None for a sensible default.

Returns

Html

An Html object.