Stack

A flex layout container with configurable direction, spacing, and alignment. Includes HStack and VStack convenience variants.

LayoutNon-interactive
HStack (horizontal)
1
2
3
VStack (vertical)
Item A
Item B
stack.rs
use stratum_leptos::*;

view! {
    <HStack spacing=StackSpacing::Md>
        <Button>"One"</Button>
        <Button>"Two"</Button>
        <Button>"Three"</Button>
    </HStack>

    <VStack spacing=StackSpacing::Sm>
        <Input placeholder="Name" />
        <Input placeholder="Email" />
    </VStack>
}

Installation

stratum add stack

Props

PropTypeDefaultDescription
directionStackDirectionColumnFlex direction: Row, Column, RowReverse, ColumnReverse
spacingStackSpacingMdGap size: None, Xs, Sm, Md, Lg, Xl
alignStackAlignStretchAlign items: Start, Center, End, Stretch, Baseline
justifyStackJustifyStartJustify content: Start, Center, End, Between, Around, Evenly

Variants

  • HStack — shorthand for Stack with direction=Row.
  • VStack — shorthand for Stack with direction=Column.

Source

Styled: stack.rs