Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change styles on ngb-tab title

I would like to style the title in ngb-tab so that it is not the default blue of an anchor tag. Ideally something like this, but the class property doesn't seem to have an effect on ngb-tab.

The HTML:

<ngb-tabset #t="ngbTabset">
    <ngb-tab [title]="'Followers'" class="tab-title">
        <ng-template ngbTabContent>
            ...
        </ng-template>
    </ngb-tab>
    <ngb-tab [title]="'Following'" class="tab-title">
        <ng-template ngbTabContent>
            ...
        </ng-template>
    </ngb-tab>
</ngb-tabset>

The CSS:

.tab-title {
  color: inherit;
}
like image 476
Noel Delgado Avatar asked Dec 13 '22 19:12

Noel Delgado


1 Answers

According to the documentation https://ng-bootstrap.github.io/#/components/tabs/ you can style the title by using their ngbTabTitle directive.

Example:

<ngb-tabset>
 <ngb-tab>
  <ng-template ngbTabTitle><span class="tab-title">Fancy Title</span></ng-template>
  <ng-template ngbTabContent>Content</ng-template>
 </ngb-tab>    
</ngb-tabset>
like image 60
Everest Avatar answered Dec 26 '22 15:12

Everest