Components

Stack

Row and column layout with consistent spacing. The component you reach for instead of writing a flex container by hand.

Rows and columns

Vertical by default. Gap comes from the spacing scale rather than a pixel value, so spacing stays consistent across the app.

One

Two

Three

One

Two

razor

<VetoStack Orientation="VetoOrientation.Horizontal" Gap="VetoSpacing.Medium">
    <VetoCard>One</VetoCard>
    <VetoCard>Two</VetoCard>
</VetoStack>

Alignment

Align positions children across the layout axis; Justify distributes them along it.

Start

Middle

End

razor

<VetoStack Orientation="VetoOrientation.Horizontal"
           Justify="VetoJustify.SpaceBetween"
           Align="VetoAlign.Center">
    <VetoCard>Start</VetoCard>
    <VetoCard>Middle</VetoCard>
    <VetoCard>End</VetoCard>
</VetoStack>

Pushing things apart

A VetoSpacer takes whatever room is going, which is how you send one item in a toolbar to the far end without any margin arithmetic.

Project files

razor

<VetoStack Orientation="VetoOrientation.Horizontal" Align="VetoAlign.Center">
    <VetoIcon Icon="@VetoIcons.Folder" />
    <span>Project files</span>
    <VetoSpacer />
    <VetoIconButton Icon="@VetoIcons.Plus" Label="Add file" />
</VetoStack>

Parameters

Parameter	Type	Default	Description
`Orientation`	`VetoOrientation`	`Vertical`	Vertical or Horizontal.
`Gap`	`VetoSpacing`	`Medium`	Space between children, from the spacing scale.
`Align`	`VetoAlign`	`Stretch`	Across the layout axis: Stretch, Start, Center, End, Baseline.
`Justify`	`VetoJustify`	`Start`	Along the layout axis, including SpaceBetween and SpaceEvenly.
`Wrap`	`bool`	`false`	Whether children wrap onto further lines.
`Reverse`	`bool`	`false`	Reverses visual order without reordering the markup.
`FullHeight`	`bool`	`false`	Fills the height available.