Skip to main content

Component | Stack

Stack is a generic container component that can be used to group other components. By default, it arranges its children in a vertical stack.

Internally, ui.stack is a div and rendered as a flexbox container. It's primary use is for controlling the layout of its children and applying other styles to control the look of your app.

ui.stack(
[
ui.text("Choose an action"),
ui.row([
ui.button("view-btn", { label: "View" }),
ui.button("edit-btn", { label: "Edit", appearance: "outline" }),
ui.button("delete-btn", { label: "Delete", appearance: "danger" })
])
],
{ align: "center" }
)

API reference

Function signature

type Component = ReturnType<typeof ui.textInput> | ReturnType<typeof ui.button> | /* more components */ | ReturnType<typeof ui.stack>

ui.stack(
children: Component | Component[],
properties?: Partial<{
direction: "vertical" | "horizontal" | "vertical-reverse" | "horizontal-reverse",
justify: "start" | "end" | "center" | "between" | "around" | "evenly",
align: "start" | "end" | "center" | "baseline" | "stretch",
spacing: string,
style: Style
}>
)

Parameters

children

required Component | Component[]
The child component(s) to be arranged within the stack. This can be a single component or a list of components.

properties.direction

optional string literal

The direction in which the children should be arranged. Defaults to "vertical".

Options:

  • "vertical": Arrange children vertically (top to bottom)
  • "horizontal": Arrange children horizontally (left to right)
  • "vertical-reverse": Arrange children vertically in reverse order (bottom to top)
  • "horizontal-reverse": Arrange children horizontally in reverse order (right to left)

properties.justify

optional string literal

Determine how the children are justified along the main axis of the stack. Defaults to "start".

Options:

  • "start": Align children to the start of the container
  • "end": Align children to the end of the container
  • "center": Center children within the container
  • "between": Distribute children evenly with equal space between them
  • "around": Distribute children evenly with equal space around them
  • "evenly": Distribute children evenly with equal space between and around them

properties.align

optional string literal

Determine how the children are aligned along the cross axis of the stack. Defaults to "start".

Options:

  • "start": Align children to the start of the container
  • "end": Align children to the end of the container
  • "center": Center children within the container
  • "baseline": Align children along their baseline
  • "stretch": Stretch children to fill the container

properties.spacing

optional string

Set the spacing between child components. Defaults to "16px".

Options include a variety of preset values like "0px", "2px", "4px", ..., "160px", or any custom string ending with "px".


properties.style

optional Style

Directly style the underlying div element using CSS. See the styling guide for more details on available style properties.

For example, you could set a border around the stack to create a card component.