Skip to content

MudTabs: Add ActiveTabClass for better customization#8698

Merged
henon merged 11 commits intoMudBlazor:devfrom
mueller-marcel:add-active-tab-customization
Apr 18, 2024
Merged

MudTabs: Add ActiveTabClass for better customization#8698
henon merged 11 commits intoMudBlazor:devfrom
mueller-marcel:add-active-tab-customization

Conversation

@mueller-marcel
Copy link
Contributor

@mueller-marcel mueller-marcel commented Apr 15, 2024

Description

This pull request adds two new properties to the MudTabs component to add custom css styles and classes the the active header. It enables the user to pass another background color the active tab header or style the text. An example where the background color has been set to green can be seen below:

image

<MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-6" ActiveTabStyle="background-color: green" >
    <MudTabPanel Text="Tab One">
        <MudText>Content One</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Tab Two">
        <MudText>Content Two</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Tab Three">
        <MudText>Content Three</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Tab Disabled" Disabled="true">
        <MudText>Content Disabled</MudText>
    </MudTabPanel>
</MudTabs>

This pull request resolves the issues #8624

How Has This Been Tested?

This feature has been tested visually. Two new overloads for the StyleBuilder have been added to implement this feature. Those overloads have been added unit tests.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

@github-actions github-actions bot added enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library PR: needs review labels Apr 15, 2024
@codecov
Copy link

codecov bot commented Apr 15, 2024 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.12%. Comparing base (28bc599) to head (899ab59).
Report is 74 commits behind head on dev.

Additional details and impacted files 
@@            Coverage Diff             @@
##              dev    #8698      +/-   ##
==========================================
+ Coverage   89.82%   90.12%   +0.29%     
==========================================
  Files         412      419       +7     
  Lines       11878    12181     +303     
  Branches     2364     2397      +33     
==========================================
+ Hits        10670    10978     +308     
+ Misses        681      665      -16     
- Partials      527      538      +11

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@mueller-marcel mueller-marcel changed the title Add functionality to pass custom css classes/styles to the active tabheader in the MudTabs component Add functionality to pass custom css classes/styles to the active tab in the MudTabs component Apr 15, 2024
danielchalmers
danielchalmers requested changes Apr 15, 2024
View reviewed changes
@mueller-marcel mueller-marcel changed the title Add functionality to pass custom css classes/styles to the active tab in the MudTabs component Add functionality to pass custom css classes to the active tab in the MudTabs component Apr 16, 2024
@henon henon requested a review from ScarletKuro April 18, 2024 11:02
@henon
Copy link
Contributor

henon commented Apr 18, 2024

Thanks for your contribution!

Can you edit this example in the docs?
image

Change the title to "Customization", add a sentence for ActiveTabClass and show it in the example. But please not this green (Kotzgrün) you showed in the example above :D. When you are done please post a screenshot of the modified example.

@mueller-marcel
Copy link
Contributor Author

mueller-marcel commented Apr 18, 2024 •
edited
Loading

@henon I improved the documentation according to your suggestions. The "Kotzgrün" has been removed :D
I added a solid border using the predefined colors from MudBlazor. The new "Customization" section looks like following:

ActiveTabClass Example

If you have any other suggestions let me know :-)

EDIT: Stupid question... How can I re-run those checks? Haven't found an option to run them again, since the tests work locally and the change of the section in the docs shouldn't break any tests. Is my first contribution...

@henon
Copy link
Contributor

henon commented Apr 18, 2024

I re-ran them now. You can make a minor change and push again to start another run

@henon
Copy link
Contributor

henon commented Apr 18, 2024

Looking good. Except, if you could manage to get them onto the same line it would be perfect.

image

@henon henon changed the title Add functionality to pass custom css classes to the active tab in the MudTabs component MudTabs: Add ActiveTabClass for better customization Apr 18, 2024
@mueller-marcel
Copy link
Contributor Author

mueller-marcel commented Apr 18, 2024

@henon Thanks for the suggestion!
I removed the unnecessary padding (pa-4) from the ActiveTabClass. The labels are now aligned horizontally. Keep in mind that the second label has a larger text extent (Typo.h6). It looks like following now:

ActiveTabClass

@henon henon merged commit 6d86f8a into MudBlazor:dev Apr 18, 2024
@henon
Copy link
Contributor

henon commented Apr 18, 2024

Thanks!

@mueller-marcel mueller-marcel deleted the add-active-tab-customization branch April 22, 2024 08:50
biegehydra pushed a commit to biegehydra/MudBlazor that referenced this pull request Apr 26, 2024
@mueller-marcel @biegehydra
MudTabs: Add ActiveTabClass for better customization (MudBlazor#8698)
fb01e36 
Co-authored-by: Marcel Müller <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@danielchalmers danielchalmers danielchalmers approved these changes

@henon henon Awaiting requested review from henon

@ScarletKuro ScarletKuro Awaiting requested review from ScarletKuro

Assignees

No one assigned

Labels

enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@mueller-marcel @henon @danielchalmers