CODEWITHSUNDEEP
angularangular-materialangular-material2mat-tab
Mariano Caldara
Mariano Caldara

Reputation: 49

There is way to set different underline color for each mat-tab?

I have material angular mat-tab component, i would like to set a different underline color for each mat-tab, i tried to use backgroundColor and selectedTabChange properties but i can't manage that

<mat-tab-group backgroundColor="green" mat-align-tabs="center" dynamicHeight headerPosition="below" (selectedTabChange)="onTabChanged($event)">
            <mat-tab label='IPV Model'>Content</mat-tab>
            <mat-tab label='IPV Market Data'>Content</mat-tab>
            <mat-tab label='Collateral'>Content</mat-tab>
            <mat-tab label='Fair Value Level'>Content</mat-tab>
 </mat-tab-group>

Upvotes: 1

Views: 2864

Answers (3)

Matt Blum
Matt Blum

Reputation: 54

I do recommend using Material's variables, like Woden suggested. With that said, I don't know the variable off the top of my head, and their documentation is lacking. You may be able to target .mat-mdc-tab-link and use :first-child, :last-child, :nth-child(x), etc.

.mat-mdc-tab-link {
  &:first-child {
    background-color: rebeccapurple;
  }

  &:nth-child(2) {
    background-color: purple;
  }
}

Upvotes: 0

Woden
Woden

Reputation: 1366

  1. In @angular/material version "^15.1.3", you'll see CSS custom properties: --mdc-tab-indicator-active-indicator-color allowed to be used.

  2. Before proceeding the code, please make sure to specify encapsulation: ViewEncapsulation.None in your @Component decorator.

  3. Therefore, the code:

.mdc-tab-indicator__content--underline {
  --mdc-tab-indicator-active-indicator-color: orange;
}

Upvotes: 1

Jay
Jay

Reputation: 604

You can do so with adding class like this:

<mat-tab-group backgroundColor="green" mat-align-tabs="center" dynamicHeight headerPosition="below" (selectedTabChange)="onTabChanged($event)">
            <mat-tab label='IPV Model' class="blue">Content</mat-tab>
            <mat-tab label='IPV Market Data' class="orange">Content</mat-tab>
            <mat-tab label='Collateral' class="green">Content</mat-tab>
            <mat-tab label='Fair Value Level' class="yellow">Content</mat-tab>
 </mat-tab-group>

and then in your css:

.mat-tab-label.blue {
  border-bottom: 1px solid blue;
}

You can repeat this with your other tabs.

Upvotes: 0

Related Questions