This repository was archived by the owner on Sep 5, 2024. It is now read-only.
Repository navigation
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
tabs: md-ripple change color on the fly #11784
Description
How could I change .md-ripple color from mat-tabs dynamically?
I have tried overwriting these classes, not working.
:host::ng-deep .md-ripple-container
background-color: transparent !important:host::ng-deep .md-ripple
background-color: red !important
color: red
Activity
Splaktar commentedon Sep 1, 2019
Thank you for taking the time to submit this issue. However there are better avenues for troubleshooting or asking for help with your app. These include Stack Overflow, Gitter, the AngularJS Material forums, etc.
Please limit GitHub issues to bug reports and enhancement requests.
Unfortunately, this issue does not follow our required issue template. This gives the team the information needed to investigate the bug or prioritize the enhancement.
You mention
.md-ripplewhich is from AngularJS Material (this repo) andmat-tabswhich sounds like Angular Material (but is actuallymat-tab-group). I'm guessing that you meantmd-tabs.If you use
class="md-accenton themd-tabselement, the inkbar and ripple will use your theme'sprimarycolor.If you use
class="md-primaryor don't specify a theme class on themd-tabselement, the inkbar and ripple will use your theme'saccentcolor.You can modify your theme using this guide.
If you want to override the theme, then I was able to verify that this style override works:
https://stackoverflow.com/a/35127566/633107
Here's a CodePen demo that demonstrates this.
[-]md-ripple change color on the fly[/-][+]tabs: md-ripple change color on the fly[/+]