Stack

Stack is a layout container displaying children in a horizontal or vertical stack.

The Stack component is the primary and most versatile building block for laying out content. It can display its children horizontally or vertically, and it is possible to align its children easily along the horizontal and vertical axes.

See also: HStack, VStack, CHStack, CVStack.

📔

You can learn about the semantics and usage of layout container, including Stack, here.

Properties

`gap (default: "$gap-normal")`

Optional size value indicating the gap between child elements.

In the following example we use pixels, characters (shorthand ch), and the em CSS unit size which is a relative size to the font size of the element (See size values).

<App>
  <Stack orientation="horizontal" backgroundColor="cyan"
      gap="80px">
    <Stack height="40px" width="40px" backgroundColor="red" />
    <Stack height="40px" width="40px" backgroundColor="green" />
    <Stack height="40px" width="40px" backgroundColor="blue" />
    <Stack height="40px" width="40px" backgroundColor="yellow" />
  </Stack>
  <Stack orientation="horizontal" backgroundColor="cyan"
          gap="12ch">
    <Stack height="40px" width="40px" backgroundColor="red" />
    <Stack height="40px" width="40px" backgroundColor="green" />
    <Stack height="40px" width="40px" backgroundColor="blue" />
    <Stack height="40px" width="40px" backgroundColor="yellow" />
  </Stack>
</App>

`horizontalAlignment (default: "start")`

Manages the horizontal content alignment for each child element in the Stack.

Available values: start (default), center, end

📔

The start and end values can be affected by i18n if the layout is in a right-to-left writing style.

<App>
  <Stack width="100%" horizontalAlignment="center" backgroundColor="cyan">
    <Stack width="36px" height="36px" backgroundColor="red" />
  </Stack>
</App>

`orientation (default: "vertical")`

An optional property that governs the Stack's orientation (whether the Stack lays out its children in a row or a column).

Available values: horizontal, vertical (default)

`reverse (default: false)`

Optional boolean property to reverse the order of child elements.

Default is false, which indicates a left-to-right layout.

<App>
  <Stack backgroundColor="cyan">
    <Stack gap="10px" orientation="horizontal">
      <Stack height="40px" width="40px" backgroundColor="red" />
      <Stack height="40px" width="40px" backgroundColor="green" />
      <Stack height="40px" width="40px" backgroundColor="blue" />
    </Stack>
    <Stack reverse="true" orientation="horizontal">
      <Stack height="40px" width="40px" backgroundColor="red" />
      <Stack height="40px" width="40px" backgroundColor="green" />
      <Stack height="40px" width="40px" backgroundColor="blue" />
    </Stack>
  </Stack>
</App>

`verticalAlignment (default: "start")`

Manages the vertical content alignment for each child element in the Stack.

Available values: start (default), center, end

<App>
  <Stack height="100px" verticalAlignment="end" backgroundColor="cyan">
    <Stack width="36px" height="36px" backgroundColor="red" />
  </Stack>
</App>

`wrapContent (default: false)`

Optional boolean which wraps the content if set to true and the available space is not big enough. Works only with horizontal orientations.

Optional boolean which wraps the content if set to true and the available space is not big enough. Works in all orientations.

<App>
  <Stack wrapContent="true" width="140px" orientation="horizontal" backgroundColor="cyan">
    <Stack height="40px" width="40px" backgroundColor="blue" />
    <Stack height="40px" width="40px" backgroundColor="blue" />
    <Stack height="40px" width="40px" backgroundColor="blue" />
    <Stack height="40px" width="40px" backgroundColor="blue" />
  </Stack>
</App>

Events

`click`

This event is triggered when the Stack is clicked.

Describes the logic that fires when the component is clicked.

<App>
  <HStack var.shown="{false}">
    <Stack height="40px" width="40px" backgroundColor="red" onClick="shown = !shown" />
    <Stack when="{shown}" height="40px" width="40px" backgroundColor="blue" />
  </HStack>
</App>

Exposed Methods

This component does not expose any methods.

Styling

This component does not have any styles.

Splitter StickyBox