SpeedDialExample1.razor

@namespace MudExtensions.Docs.Examples

<MudGrid>
    <MudItem xs="12" sm="8">
        <div Class="relative pa-4 d-flex align-center justify-center" Style="height: 500px; background-color: var(--mud-palette-background-gray)">
            <MudSpeedDial Origin="_origin" Padding="_padding" OpenOnHover="_openOnHover" OpenOnClick="_openOnClick" IconOnOpen="@_openIcon" Color="Color.Primary" OnMainButtonClick="@(() => ButtonClick("Main button clicked."))">
                <MudFab Size="Size.Small" IconSize="Size.Small" StartIcon="@Icons.Custom.Brands.MudBlazor" OnClick="@(() => ButtonClick("First button clicked."))" />
                <MudFab Size="Size.Small" IconSize="Size.Small" StartIcon="@Icons.Custom.Brands.MudBlazor" Color="Color.Secondary" OnClick="@(() => ButtonClick("Second button clicked."))" />
                <MudFab Size="Size.Small" IconSize="Size.Small" StartIcon="@Icons.Custom.Brands.MudBlazor" Color="Color.Tertiary" OnClick="@(() => ButtonClick("Third button clicked."))" />
            </MudSpeedDial>
            @if (_show)
            {
                <div style="width: 300px">
                    <MudProgressLinear @key="_key" Value="_progressValue" Color="Color.Primary" />
                    <MudText Typo="Typo.h6">@_text</MudText>
                </div>
            }
        </div>
    </MudItem>

    <MudItem xs="12" sm="4">
        <MudStack Spacing="4">
            <MudSelect @bind-Value="_origin" Variant="Variant.Outlined" Label="Origin">
                <MudSelectItem Value="Origin.TopLeft">Top - Left</MudSelectItem>
                <MudSelectItem Value="Origin.TopRight">Top - Right</MudSelectItem>
                <MudSelectItem Value="Origin.TopCenter">Top - Center</MudSelectItem>
                <MudSelectItem Value="Origin.BottomLeft">Bottom - Left</MudSelectItem>
                <MudSelectItem Value="Origin.BottomRight">Bottom - Right</MudSelectItem>
                <MudSelectItem Value="Origin.BottomCenter">Bottom - Center</MudSelectItem>
            </MudSelect>
            <MudNumericField @bind-Value="_padding" Variant="Variant.Outlined" Label="Padding" />
            <MudCheckBox @bind-Value="_openOnHover" Color="Color.Secondary" Label="Open On Hover" />
            <MudCheckBox @bind-Value="_openOnClick" Color="Color.Secondary" Label="Open On Click" />
            <MudSwitchM3 @ref="_switch" T="bool" Value="_differentIconOnOpen" ValueChanged="@(() => IconChanged(_switch?.Value))" Color="Color.Secondary" Label="Different Icon When Open" />
        </MudStack>
    </MudItem>
</MudGrid>

@code {
    MudSwitchM3<bool>? _switch;
    Origin _origin = Origin.TopRight;
    int _padding = 0;
    bool _show;
    int _progressValue;
    string? _text;
    int _key;
    bool _openOnHover = true;
    bool _openOnClick = true;
    bool _differentIconOnOpen = true;
    string _openIcon = Icons.Material.Filled.Close;

    private async Task ButtonClick(string text)
    {
        _show = true;
        await Task.Delay(1);
        _progressValue = 100;
        _key++;
        _text = text;

        while (0 < _progressValue)
        {
            await Task.Delay(20);
            _progressValue -= 2;
            StateHasChanged();
        }
        _show = false;
    }

    private void IconChanged(bool? value)
    {
        _differentIconOnOpen = value ?? false;
        if (_differentIconOnOpen == true)
        {
            _openIcon = Icons.Material.Filled.Close;
        }
        else
        {
            _openIcon = "";
        }
    }
}