更改 ngb-tab 标题的样式

Question

我想在 ngb-tab 中设置标题样式，使其不是锚标记的默认蓝色。理想情况下是这样的，但是 class 属性似乎对 ngb-tab.

没有影响

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>

CSS:

.tab-title {
  color: inherit;
}

Answer 1

根据文档 https://ng-bootstrap.github.io/#/components/tabs/，您可以使用他们的 ngbTabTitle 指令设置标题样式。

示例：

<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>

Answer 2

更好的选择是珠穆朗玛峰的答案。但作为另一个答案，您可以在组件封装中使用：ViewEncapsulation.None

@Component({
  ...
  templateUrl: 'my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  encapsulation: ViewEncapsulation.None
})

这使得css被写入文件头。因此，这个 css 适用于整个应用程序。如果您不想，可以将导航选项卡包含在 div

中

<div class="customTab">
 <ngb-tabset>
  <ngb-tab title="Simple" class="myClass">
    <ng-template ngbTabContent>
      ...
 <ngb-tabset>
</div>

还有你的.css喜欢

.customTab .nav-tabs .nav-link.active
{
    color:black;
}
.customTab .nav-tabs .nav-link
{
    color:cyan;
}

有关 ViewEncapsulation 的更多信息，请参阅，例如https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

Answer 3

我试图更改非活动选项卡的背景颜色（活动选项卡和非活动选项卡之间的区别太细微）并且能够通过全局样式设置来做到这一点 styles.scss:

ngb-tabset ul.nav-tabs li a.nav-link.active {
  background-color: transparent;
}

ngb-tabset ul.nav-tabs li a.nav-link {
  background-color: #eeeeee;
}

更改 ngb-tab 标题的样式

Change styles on ngb-tab title

bootstrap-4

ng-bootstrap

angular