SwitchM3Example1.razor

@namespace MudExtensions.Docs.Examples

<MudGrid>
    <MudItem xs="12" sm="8" Class="d-flex flex-column gap-8 align-center justify-center" Style="height: 500px">
        <MudSwitch @bind-Value="_checked" Color="_color" ThumbIcon="@(_checked ? _icon : _offIcon)">M2 Switch (MudSwitch)</MudSwitch>
        <MudSwitchM3 @bind-Value="_checked" Color="_color" ThumbIcon="@_icon" ThumbOffIcon="@_offIcon">M3 Switch (MudSwitchM3)</MudSwitchM3>
    </MudItem>

    <MudItem xs="12" sm="4">
        <MudStack Spacing="4">
            <MudSelect @bind-Value="_color" Variant="Variant.Outlined" Label="Color">
                @foreach (Color item in Enum.GetValues<Color>())
                {
                    <MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
                }
            </MudSelect>
            <MudText>Icon</MudText>
            <MudRadioGroup @bind-Value="_icon">
                <MudRadio T="string" Value="null">None</MudRadio>
                <MudRadio Value="@Icons.Custom.Brands.MudBlazor"><MudIcon Icon="@Icons.Custom.Brands.MudBlazor" /></MudRadio>
                <MudRadio Value="@Icons.Material.Filled.Done"><MudIcon Icon="@Icons.Material.Filled.Done" /></MudRadio>
            </MudRadioGroup>
            <MudText>Off Icon</MudText>
            <MudRadioGroup @bind-Value="_offIcon">
                <MudRadio T="string" Value="null">None</MudRadio>
                <MudRadio Value="@Icons.Custom.Brands.MudBlazor"><MudIcon Icon="@Icons.Custom.Brands.MudBlazor" /></MudRadio>
                <MudRadio Value="@Icons.Material.Filled.Remove"><MudIcon Icon="@Icons.Material.Filled.Remove" /></MudRadio>
                <MudRadio Value="@Icons.Material.Filled.Close"><MudIcon Icon="@Icons.Material.Filled.Close" /></MudRadio>
            </MudRadioGroup>
        </MudStack>
    </MudItem>
</MudGrid>

@code{
    bool _checked = false;
    Color _color;
    string? _icon;
    string? _offIcon;
}