Angular 6 - ng-bootstrap - 样式选项卡

时间:2018-06-03 19:51:02

标签: angular angular-components ng-bootstrap

我有这个引导标签

<ngb-tabset>
    <ngb-tab title="Tab 1">
        <ng-template ngbTabContent>
            Tab 1
        </ng-template>
    </ngb-tab>
    <ngb-tab title="Tab 2">
        <ng-template ngbTabContent>
            Tab 2
        </ng-template>
    </ngb-tab>
</ngb-tabset>

标签上的文字颜色为蓝色。我知道如果我创建全局样式,我可以覆盖默认值。但我想从父组件

设置标签样式

我知道我可以设计儿童组件的样式,但在这种情况下它不起作用(How to style child components from parent component's css file?)。有什么建议吗?

styles: [
`
 :host { color: red; }

 :host ::ng-deep parent {
   color:blue;
 }
 :host ::ng-deep child{
   color:orange;
 }
 :host ::ng-deep child.class1 {
   color:yellow;
 }
 :host ::ng-deep child.class2{
   color:pink;
 }
`
],

1 个答案:

答案 0 :(得分:8)

对于使用ng-bootstrap选项卡的以下模板:

<ngb-tabset class="tabset1">
    <ngb-tab title="Tab 1">
        <ng-template ngbTabContent>
            Tab 1
        </ng-template>
    </ngb-tab>
    <ngb-tab title="Tab 2">
        <ng-template ngbTabContent>
            Tab 2
        </ng-template>
    </ngb-tab>
</ngb-tabset>

您可以使用以下CSS规则覆盖默认标签标题样式:

:host ::ng-deep .tabset1 a.nav-link {
  color: green;
}

:host ::ng-deep .tabset1 a.nav-link.active {
  color: red;
  font-weight: bold;
}

请参阅this stackblitz了解演示。

注意:如果未在class="tabset1"元素上设置属性ngb-tabset,则应从CSS样式中删除选择器.tabset1