Add customization options to the active tab in the MudTabs component

Feature request type

Enhance component

Component name

MudTabs

Is your feature request related to a problem?

The MudTabs component exposes properties to style the inactive tabs and the panel with custom CSS rules. In my current project I need to customize the active tab with CSS to set borders and adjust the background color. Unfortunately the MudTabs component does not provide any functionality to style the active tab according to your needs with CSS.

I noticed the missing functionality when I overrided the mud-active-tab class with some custom border styling and then switched the tab's position from top to bottom (or any other value). Since the border styling was hard coded to style the border-bottom in my css file I could not change the css dynamically according to the tab's position to use any other side of the border. This looked like following:

Describe the solution you'd like

As a solution to this issue I would like to suggest adding two new properties of type string to the MudTabs component (e.g. ActiveTabClass and ActiveTabStyle). This way a custom style can be provided to the active tab and the borders (or any other style) can be set according to the position of the tabs.

Have you seen this feature anywhere else?

I have seen a similar feature in the Synfusion library. In the documentation they describe which classes need to be overriden in order to customize the selected tab.

Describe alternatives you've considered

As I explained I have statically overriden the mud-active-tab class for customization purposes but this is not dynamicaly, thus I request to implement this feature.

Pull Request

• I would like to do a Pull Request

Code of Conduct

• I agree to follow this project's Code of Conduct