Open cziberpv opened 5 years ago
You can provide your own custom content for the tab label but I agree there is no great way to style the entire label (not just text).
https://stackblitz.com/edit/angular-material2-issue-epfe1y?file=app/app.component.ts
Duplicate of #9290
We can tweak with <ng-template>
to add a class for styling the mat-tab-panel
HTML
<mat-tab>
<ng-template mat-tab-label>
<span class="deleteTab">Delete Tab</span>
</ng-template>
...
</mat-tab>
CSS
.deleteTab {
color: red;
}
So, the labelClass
input does not work?
Update: works in 13.2.0, great!
Yeah having a way to define classes for the automatically generated components would be very useful. Currently there is no way to differentiate between the different mat-tab-body-content
for example.
In other projects I have seen the approach of allowing a bodyClass
attribute to be passed for example.
labelClass and bodyClass are still broken.
They don't conform to the docs, nor do they seem to do anything.
@exo-pla-net
It seems that the corresponding style definition for the labelClass
and bodyClass
need to be done in the respective material theme file or app's root style file
Here is a working example I made from the v14 docs, but it works for v17 too https://stackblitz.com/edit/y3qw5m?file=src%2Fapp%2Ftab-group-align-example.html
What is the expected behavior?
[ngClass] used on mat-tab should add class on "mat-tab-label" div
What is the current behavior?
There is no way to add custom class to "mat-tab-label" div
What are the steps to reproduce?
https://stackblitz.com/edit/angular-material2-issue-xq3ql9
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
7.3.7
Is there anything else we should know?