Component | Distributed Row

info

Introduced in v0.19.0 of the SDK.

Distributed Row is an opinionated container component that can be used to group other components. By default, it arranges its children in a horizontal row and maximizes the space between each child.

It's especially useful for header bars where you want to display, for example, some text on the left and buttons on the right.

Node.js

ui.distributedRow([
    ui.header("Users", { size: "sm" }),
    ui.button("create-btn", { label: "Create new" })
])

Python

ui.distributed_row([
    ui.header("Users", size="sm"),
    ui.button("create-btn", label="Create new")
])

Node.js

Internally, ui.distributedRow is a convenience wrapper around ui.stack with default properties set accordingly. This means that all properties available to ui.stack are also available to ui.distributedRow.

Python

Internally, ui.distributed_row is a convenience wrapper around ui.stack with default properties set accordingly. This means that all properties available to ui.stack are also available to ui.distributed_row.

API reference

Node.js

See the Stack API reference for more details. The only difference is that ui.distributedRow sets the direction property to "horizontal", "justify" to "between", and "align" to "center".

Python

See the Stack API reference for more details. The only difference is that ui.distributed_row sets the direction property to "horizontal", "justify" to "between", and "align" to "center".