How do you set the style for the selected MudButton in the MudButtonGroup?

634 Views Asked by At

Button Group

I am looking for a way to set the style of the selected button in the MudButtonGroup.

I have looked at the classes set for the Buttons and ButtonGroup and have not found anything that differentiates the selected button.

1

There are 1 best solutions below

3
RBee On BEST ANSWER

You can do something like this, where you send the button's reference as a parameter when it's clicked and change its properties there.

<MudButtonGroup Color="Color.Primary" Variant="Variant.Outlined" OverrideStyles="false">
    <MudButton @ref="_button1" OnClick="(e)=>HandleClick(e,_button1)">One</MudButton>
    <MudButton @ref="_button2" OnClick="(e)=>HandleClick(e,_button2)">Two</MudButton>
    <MudButton @ref="_button3" OnClick="(e)=>HandleClick(e,_button3)">Three</MudButton>
</MudButtonGroup>
@code{
    MudButton _button1,_button2,_button3;
    List<MudButton> _buttons;
    protected override void OnAfterRender(bool firstRender)
    {
        if(firstRender)
        {
            _buttons = new(){_button1,_button2,_button3};
        }
    }
    void HandleClick(MouseEventArgs e, MudButton clickedButton)
    {
        foreach(var button in _buttons)
        {
            if(button.Equals(clickedButton)){
                button.Color = Color.Secondary;
            }else{
                button.Color = Color.Default;
            }
        }
    }
}

Snippet