Basic Usage
The default MudStack
displays its items vertically in a column.
<MudStack> <MudPaper Class="pa-3">Item 1</MudPaper> <MudPaper Class="pa-3">Item 2</MudPaper> <MudPaper Class="pa-3">Item 3</MudPaper> </MudStack>
Direction
With the Row
property set to true the items will be displayed horizontally in a row.
<MudStack Row="true"> <MudPaper Class="pa-3">Item 1</MudPaper> <MudPaper Class="pa-3">Item 2</MudPaper> <MudPaper Class="pa-3">Item 3</MudPaper> </MudStack>
Spacing
The default spacing can be changed by setting any number between 0 and 16 with the Spacing property.
<MudStack Spacing="@_spacing" Row="true"> <MudPaper Class="pa-3">Item 1</MudPaper> <MudPaper Class="pa-3">Item 2</MudPaper> <MudPaper Class="pa-3">Item 3</MudPaper> </MudStack> <MudSlider @bind-Value="_spacing" Min="0" Max="16">Spacing: @_spacing.ToString()</MudSlider>
@code { private int _spacing { get; set; } = 3; }
Usage Examples
Here is two simple examples to demonstrate what MudStack
can be used for.

Mony Larsson
onebiteonekill@mony.dog
<MudStack> <MudPaper Class="pa-4"> <MudStack Row="true"> <MudAvatar Image="images/mony.jpg" Size="Size.Large" /> <MudStack Justify="Justify.Center" Spacing="0"> <MudText Typo="Typo.body1">Mony Larsson</MudText> <MudText Typo="Typo.body2">onebiteonekill@mony.dog</MudText> </MudStack> </MudStack> </MudPaper> <MudPaper Class="pa-4"> <MudStack Spacing="4"> <MudTextField T="string" Label="Card number" Mask="@(new PatternMask("0000 0000 0000 0000"))" /> <MudStack Row="true"> <MudTextField T="string" Label="Expires" Mask="@(new DateMask("MM/YY", 'Y', 'M'))" /> <MudTextField T="string" Label="CVC" Mask="@(new PatternMask("000"))" /> </MudStack> <MudButton Variant="Variant.Filled" Color="Color.Primary" DisableElevation="true">Pay Now</MudButton> </MudStack> </MudPaper> </MudStack>
Item Placement
Justify
With the Justify
property you can define how the space between and around items along the main-axis of the MudStack
<MudPaper Outlined="true" Class="border-dashed"> <MudStack Justify="@_justify" Row="true"> <MudPaper Class="pa-3 mud-theme-primary">Item 1</MudPaper> <MudPaper Class="pa-3 mud-theme-primary">Item 2</MudPaper> <MudPaper Class="pa-3 mud-theme-primary">Item 3</MudPaper> </MudStack> </MudPaper> <MudChipSet Filter="true" Mandatory="true" Class="d-flex justify-center mt-12"> <MudChip Text="Start" OnClick="@(() => _justify = Justify.FlexStart)" SelectedColor="Color.Primary" /> <MudChip Text="Center" OnClick="@(() => _justify = Justify.Center)" SelectedColor="Color.Primary" Default="true" /> <MudChip Text="End" OnClick="@(() => _justify = Justify.FlexEnd)" SelectedColor="Color.Primary" /> <MudChip Text="Space Around" OnClick="@(() => _justify = Justify.SpaceAround)" SelectedColor="Color.Primary" /> <MudChip Text="Space Between" OnClick="@(() => _justify = Justify.SpaceBetween)" SelectedColor="Color.Primary" /> <MudChip Text="Space Evenly" OnClick="@(() => _justify = Justify.SpaceEvenly)" SelectedColor="Color.Primary" /> </MudChipSet>
@code {
Justify _justify = Justify.Center;
}
Align
With the AlignItems
property you can control the alignment of items on the cross axis of the MudStack
<MudPaper Outlined="true" Class="border-dashed"> <MudStack AlignItems="_align" Row="true" Style="height:200px;"> <MudPaper Class="py-1 px-3 mud-theme-primary">Item 1</MudPaper> <MudPaper Class="py-3 px-3 mud-theme-primary">Item 2</MudPaper> <MudPaper Class="py-5 px-3 mud-theme-primary">Item 3</MudPaper> </MudStack> </MudPaper> <MudChipSet Filter="true" Mandatory="true" Class="d-flex justify-center mt-12"> <MudChip Text="Start" OnClick="@(() => _align = AlignItems.Start)" SelectedColor="Color.Primary" Default="true" /> <MudChip Text="Center" OnClick="@(() => _align = AlignItems.Center)" SelectedColor="Color.Primary" /> <MudChip Text="End" OnClick="@(() => _align = AlignItems.End)" SelectedColor="Color.Primary" /> <MudChip Text="Stretch" OnClick="@(() => _align = AlignItems.Stretch)" SelectedColor="Color.Primary" /> <MudChip Text="Baseline" OnClick="@(() => _align = AlignItems.Baseline)" SelectedColor="Color.Primary" /> </MudChipSet>
@code {
AlignItems _align = AlignItems.Start;
}
Combined
If MudStack
is in Row
mode or not, the behavior of Justify
and AlignItems
can almost be described as they switched as the axis they control are changed.
In the example bellow swap between column and row and see how Justify
and AlignItems
behaves differently.
<MudPaper Outlined="true" Class="border-dashed"> <MudStack Justify="_justify" AlignItems="_align" Row="_row" Style="height:200px;"> <MudPaper Class="py-1 px-3 mud-theme-primary">Item 1</MudPaper> <MudPaper Class="py-3 px-3 mud-theme-primary">Item 2</MudPaper> <MudPaper Class="py-5 px-3 mud-theme-primary">Item 3</MudPaper> </MudStack> </MudPaper> <MudStack Row="true" Justify="Justify.Center"> <MudRadioGroup @bind-SelectedOption="@_row"> <MudRadio Option="false" Dense="true">Column</MudRadio> <MudRadio Option="true" Dense="true">Row</MudRadio> </MudRadioGroup> </MudStack> <MudStack Row="true"> <MudChipSet Filter="true" Mandatory="true" Class="d-flex justify-center"> <MudChip Text="Justify Start" OnClick="@(() => _justify = Justify.FlexStart)" SelectedColor="Color.Primary" Variant="Variant.Text" Default="true" /> <MudChip Text="Justify End" OnClick="@(() => _justify = Justify.FlexEnd)" SelectedColor="Color.Primary" Variant="Variant.Text" /> </MudChipSet> <MudChipSet Filter="true" Mandatory="true" Class="d-flex justify-center"> <MudChip Text="Align Start" OnClick="@(() => _align = AlignItems.Start)" SelectedColor="Color.Secondary" Variant="Variant.Text" Default="true" /> <MudChip Text="Align End" OnClick="@(() => _align = AlignItems.End)" SelectedColor="Color.Secondary" Variant="Variant.Text" /> </MudChipSet> </MudStack>
@code { bool _row = true; Justify _justify = Justify.FlexStart; AlignItems _align = AlignItems.Start; }
Interactive
Spacing:
<MudPaper Outlined="true" Class="border-dashed"> <MudStack Justify="@_justify" AlignItems="@_align" Row="@_row" Reverse="@_reverse" Spacing="@_spacing" Style="height:300px;"> <MudPaper Class="py-1 px-3 mud-theme-primary">Item 1</MudPaper> <MudPaper Class="py-3 px-3 mud-theme-primary">Item 2</MudPaper> <MudPaper Class="py-5 px-3 mud-theme-primary">Item 3</MudPaper> </MudStack> </MudPaper> <MudStack Row="true" AlignItems="AlignItems.Center"> <MudSwitch @bind-Checked="@_row" Label="Row" Color="Color.Primary" /> <MudSwitch @bind-Checked="@_reverse" Label="Reverse" Color="Color.Primary" /> <MudText>Spacing:</MudText> <MudSlider @bind-Value="_spacing" Min="0" Max="16"/> </MudStack> <MudStack Row="true" Justify="Justify.Center"> <MudChipSet Filter="true" Mandatory="true"> <MudChip Text="Justify Start" OnClick="@(() => _justify = Justify.FlexStart)" SelectedColor="Color.Primary" Variant="Variant.Text" /> <MudChip Text="Justify Center" OnClick="@(() => _justify = Justify.Center)" SelectedColor="Color.Primary" Variant="Variant.Text" Default="true" /> <MudChip Text="Justify End" OnClick="@(() => _justify = Justify.FlexEnd)" SelectedColor="Color.Primary" Variant="Variant.Text" /> <MudChip Text="Justify Space Around" OnClick="@(() => _justify = Justify.SpaceAround)" SelectedColor="Color.Primary" Variant="Variant.Text" /> <MudChip Text="Justify Space Between" OnClick="@(() => _justify = Justify.SpaceBetween)" SelectedColor="Color.Primary" Variant="Variant.Text" /> <MudChip Text="Justify Space Evenly" OnClick="@(() => _justify = Justify.SpaceEvenly)" SelectedColor="Color.Primary" Variant="Variant.Text" /> </MudChipSet> </MudStack> <MudStack Row="true" Justify="Justify.Center"> <MudChipSet Filter="true" Mandatory="true"> <MudChip Text="Align Start" OnClick="@(() => _align = AlignItems.Start)" SelectedColor="Color.Secondary" Variant="Variant.Text" /> <MudChip Text="Align Center" OnClick="@(() => _align = AlignItems.Center)" SelectedColor="Color.Secondary" Variant="Variant.Text" Default="true" /> <MudChip Text="Align End" OnClick="@(() => _align = AlignItems.End)" SelectedColor="Color.Secondary" Variant="Variant.Text" /> <MudChip Text="Align Stretch" OnClick="@(() => _align = AlignItems.Stretch)" SelectedColor="Color.Secondary" Variant="Variant.Text" /> <MudChip Text="Align Baseline" OnClick="@(() => _align = AlignItems.Baseline)" SelectedColor="Color.Secondary" Variant="Variant.Text" /> </MudChipSet> </MudStack>
@code { Justify _justify = Justify.Center; AlignItems _align = AlignItems.Center; bool _row = false; bool _reverse = false; private int _spacing { get; set; } = 3; }