blazormudblazorbuttongroup

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


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.


Solution

  • 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