Question

我想在ngb-tab中设置标题样式，使其不是锚标记的默认蓝色。理想情况下是这样的，但类属性似乎对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适用于整个应用程序。如果您不想，可以将navtab括在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

我试图更改非活动标签的背景颜色（活动和非活动标签之间的差异太细微了），并且能够通过全局样式中的样式来做到这一点。

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标题上更改样式

3 个答案: