Basic usage
<MudStack Row="true" Style="width: 300px;" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center"> <MudStack Spacing="0"> <MudSwitch @bind-Value="_open" Label="@(_open ? "Opened" : "Closed")" Color="Color.Primary"/> <MudSwitch @bind-Value="_fixed" Label="@(_fixed ? "Fixed" : "Relative")" Color="Color.Primary"/> </MudStack> <MudFabMenu StartIcon="@Icons.Material.Outlined.Send" Color="Color.Primary" @bind-Open="@_open" Fixed="@_fixed"> <MudFabMenuItem StartIcon="@Icons.Custom.Brands.Slack"/> <MudFabMenuItem StartIcon="@Icons.Custom.Brands.Discord"/> <MudFabMenuItem StartIcon="@Icons.Custom.Brands.Gmail"/> </MudFabMenu> </MudStack>
@code { private bool _open; private bool _fixed; }
Styling
<MudFabMenu StartIcon="@Icons.Material.Outlined.Settings" Color="Color.Primary" DampenItemsBackgroundColor="false" UseCloseIcon="false" Size="Size.Small"> <MudFabMenuItem EndIcon="@Icons.Material.Outlined.LooksOne" Color="Color.Primary" Size="Size.Small"/> <MudFabMenuItem EndIcon="@Icons.Material.Outlined.LooksTwo" Color="Color.Primary" Size="Size.Small" /> <MudFabMenuItem EndIcon="@Icons.Material.Outlined.Looks3" Color="Color.Primary" Size="Size.Small" /> </MudFabMenu> <MudFabMenu StartIcon="@Icons.Material.Outlined.Send" Color="Color.Secondary" AlignItems="AlignItems.End"> <MudFabMenuItem EndIcon="@Icons.Material.Outlined.LooksOne" Label="One" Color="Color.Secondary"/> <MudFabMenuItem EndIcon="@Icons.Material.Outlined.LooksTwo" Label="Two" Color="Color.Secondary"/> <MudFabMenuItem EndIcon="@Icons.Material.Outlined.Looks3" Label="Three" Color="Color.Secondary"/> </MudFabMenu> <MudFabMenu Label="Menu" Color="Color.Tertiary" AlignItems="AlignItems.End" OpenOnMouseHover="false" CloseOnMenuItemClicked="false"> <MudFabMenuItem EndIcon="@Icons.Material.Outlined.LooksOne" Label="One" Color="Color.Tertiary" Style="color: rgb(33, 33, 33);"/> <MudFabMenuItem EndIcon="@Icons.Material.Outlined.LooksTwo" Label="Two" Color="Color.Tertiary" Style="color: rgb(33, 33, 33);"/> <MudFabMenuItem EndIcon="@Icons.Material.Outlined.Looks3" Label="Three" Color="Color.Tertiary" Style="color: rgb(33, 33, 33);"/> </MudFabMenu>
Direction
Direction: Top
<MudStack Row Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center" Style="width:400px;" Breakpoint="Breakpoint.SmAndDown"> <MudStack> <MudText>Direction: @_direction</MudText> <MudToggleGroup T="Direction" SelectionMode="SelectionMode.SingleSelection" @bind-Value="_direction" Color="Color.Primary" CheckMark FixedContent Vertical> <MudToggleItem Value="@Direction.Top" Text="Top" /> <MudToggleItem Value="@Direction.Right" Text="Right" /> <MudToggleItem Value="@Direction.Bottom" Text="Bottom" /> <MudToggleItem Value="@Direction.Left" Text="Left" /> </MudToggleGroup> </MudStack> <MudFabMenu StartIcon="@Icons.Material.Outlined.Send" Color="Color.Primary" Direction="@_direction"> <MudFabMenuItem StartIcon="@Icons.Custom.Brands.Slack" Color="Color.Secondary" /> <MudFabMenuItem StartIcon="@Icons.Custom.Brands.Discord" Color="Color.Secondary" /> <MudFabMenuItem StartIcon="@Icons.Custom.Brands.Gmail" Color="Color.Secondary" /> </MudFabMenu> </MudStack>
@code { private Direction _direction = Direction.Top; }