MudBlazor - Blazor Component Library

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;
}

Wrapping

The default wrap behavior can be changed by setting the Wrap property.

Width: 200px

Height: 200px

Row

No Wrap

Wrap

Wrap Reverse

<MudPaper Outlined="true" Class="border-dashed pa-4">
    <MudStack Wrap="@_wrap" Spacing="4" Row="@_row" Style="@_size" AlignItems="AlignItems.Start">
        <MudButton Variant="Variant.Filled" Color="Color.Primary" Style="" >Button 1</MudButton>
        <MudButton Variant="Variant.Filled" Color="Color.Primary" Style="" >Button 2</MudButton>
        <MudButton Variant="Variant.Filled" Color="Color.Primary" Style="" >Button 3</MudButton>
        <MudButton Variant="Variant.Filled" Color="Color.Primary" Style="" >Button 4</MudButton>
        <MudButton Variant="Variant.Filled" Color="Color.Primary" Style="" >Button 5</MudButton>
    </MudStack>
</MudPaper>

<MudSlider @bind-Value="_width" Min="100" Max="800">Width: @_width.ToString()px</MudSlider>
<MudSlider @bind-Value="_height" Min="100" Max="800">Height: @_height.ToString()px</MudSlider>

<MudStack Row AlignItems="AlignItems.Center">
    <MudSwitch @bind-Value="_row" Color="Color.Primary">Row</MudSwitch>
    <MudChipSet T="Wrap" CheckMark @bind-SelectedValue="_wrap">
        <MudChip T="Wrap" Text="No Wrap" Value="@(Wrap.NoWrap)" SelectedColor="Color.Primary" Variant="Variant.Text" Default="true"/>
        <MudChip T="Wrap" Text="Wrap" Value="@(Wrap.Wrap)" SelectedColor="Color.Primary" Variant="Variant.Text" />
        <MudChip T="Wrap" Text="Wrap Reverse" Value="@(Wrap.WrapReverse)" SelectedColor="Color.Primary" Variant="Variant.Text" />
    </MudChipSet>
</MudStack>

@code {
    private Wrap _wrap = Wrap.NoWrap;

    private int _width { get; set; } = 200;
    private int _height { get; set; } = 200;
    private bool _row { get; set; } = true;

    private string _size => $"width: {_width}px; height: {_height}px;";
}