Skip to content
LAYOUT · FREE

Stack

Lay out items in a row or column with even spacing.

Lay out items in a row or column with even spacing, without writing layout code for each case.

Why it helps

  • Consistent gaps
  • Row or column
  • Nests cleanly

Where it fits

  • Toolbars
  • Form sections
  • Card contents
Stack control in a RayCraft page

Example

<Stack Direction="StackDirection.Column" Spacing="3">
    <Stack Align="center" Justify="space-between">
        <strong>Row, space-between</strong>
        <Badge Severity="Severity.Info">new</Badge>
    </Stack>
    <Stack Spacing="4" Wrap>
        <Button>One</Button>
        <Button Variant="Variant.Outlined">Two</Button>
        <Button Variant="Variant.Text">Three</Button>
    </Stack>
</Stack>

A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.

Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.

All controls ยท Documentation