Hello,
I have a ButtonGroup (with the button-group style class) with 3 ButtonGroup Items. When I change the ButtonGroupItem that is selected, I want the color of the background and text of the newly selected ButtonGroupItem to change. How can I do this?
Thank you very much!
Hi Catarina,
You can change the text by using an expression and an If. If the condition correspondent to the button being selected (in my case, the local variable Integer to have the value 1), then show text A, otherwise text B, like in the example below:
As for the color, you can apply the same principle on the class of the ButtonGroupItem, like on the screenshot below:
Kind Regards,João
Hello Catarina,
I agree with @João Marques, but there is one more thing you can do to personalize the background color of this widget.
If you open the OutsystemsUI theme and search for 'button-group', you will see all css classes applied to this widget:
Then you can open your app's theme and override some of these classes.
In this use case, I think you will need to change the '.button-group-item.button-group-selected-item' class. But perhaps more classes need to be changed.
The benefit of doing this is that you will change all button groups in one place, making them easier to manage in the future.
Best regards,
Miguel
I agree with Miguel.
It will benefit you as you don't need to update if condition for every button group item if you define the class initially.