[英]Angular 6 - ng-bootstrap - Style Tabs
我有这个引导标签
<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>
选项卡上的文本颜色为蓝色。 我知道如果我创建全局样式,我可以覆盖默认值。 但我想从父组件设置标签样式
我知道我可以设置子组件的样式,但在这种情况下它不起作用( 如何从父组件的css文件设置子组件的样式? )。 有什么建议?
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;
}
`
],
对于以下使用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;
}
有关演示,请参阅此stackblitz 。
注意:如果未在ngb-tabset
元素上设置属性class="tabset1"
,则应从CSS样式中删除选择器.tabset1
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.