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>
Breakpoint
With the Breakpoint property set, the state of the Row property will be reversed based on the defined screen size breakpoint. For example, when set to a specific breakpoint such as Md, the row state is reversed at that screen size. If set to a range like MdAndUp, the row state will be reversed for all screen sizes greater than or equal to the specified breakpoint.
Item 1
Item 2
Item 3
<MudGrid> <MudItem xs="12" md="8"> <MudStack Row="@_row" Reverse="@_reverse" Breakpoint="@_breakpoint"> <MudPaper Class="pa-3">Item 1</MudPaper> <MudPaper Class="pa-3">Item 2</MudPaper> <MudPaper Class="pa-3">Item 3</MudPaper> </MudStack> </MudItem> <MudItem xs="12" md="4"> <MudStack> <MudSwitch Label="Row" @bind-Value="_row" /> <MudSwitch Label="Reverse" @bind-Value="_reverse" /> <MudSelect T="Breakpoint" @bind-Value="_breakpoint" Label="Breakpoint"> @foreach (var value in Enum.GetValues(typeof(Breakpoint)).Cast<Breakpoint>()){ <MudSelectItem T="Breakpoint" Value="value">@value</MudSelectItem> } </MudSelect> </MudStack> </MudItem> </MudGrid>
@code { private Breakpoint _breakpoint = Breakpoint.None; private bool _row = false; private bool _reverse = false; }