Stack

Manages layout of its childitems along the vertical or horizontal axis.

API
Basic Usage

The default MudStack displays its items vertically in a column.

Item 1
Item 2
Item 3
<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.

Item 1
Item 2
Item 3
<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.

Item 1
Item 2
Item 3

Spacing: 3

<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

Item 1
Item 2
Item 3
Start
Center
End
Space Around
Space Between
Space Evenly
<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

Item 1
Item 2
Item 3
Start
Center
End
Stretch
Baseline
<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.

Item 1
Item 2
Item 3
Justify Start
Justify End
Align Start
Align End
<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

Item 1
Item 2
Item 3

Spacing:

Justify Start
Justify Center
Justify End
Justify Space Around
Justify Space Between
Justify Space Evenly
Align Start
Align Center
Align End
Align Stretch
Align Baseline
<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;
}
Spacer
SwipeArea
An unhandled error has occurred. Reload 🗙