Html 为ngb选项卡集创建自定义CSS设计
我正在尝试为ngb选项卡集创建自定义设计 下面是html代码Html 为ngb选项卡集创建自定义CSS设计,html,angular,sass,ng-bootstrap,angular-bootstrap,Html,Angular,Sass,Ng Bootstrap,Angular Bootstrap,我正在尝试为ngb选项卡集创建自定义设计 下面是html代码 <ngb-tabset> <ngb-tab> <ng-template ngbTabTitle><span class="tab-title">All Professional Learnings</span></ng-template> <ng-template ngbTabC
<ngb-tabset>
<ngb-tab>
<ng-template ngbTabTitle><span class="tab-title">All Professional Learnings</span></ng-template>
<ng-template ngbTabContent>
<app-all-professional-learnings></app-all-professional-learnings>
</ng-template>
</ngb-tab>
<ngb-tab>
<ng-template ngbTabTitle><span class="tab-title">My Professional Learnings</span></ng-template>
<ng-template ngbTabContent>
<app-my-professional-learnings></app-my-professional-learnings>
</ng-template>
</ngb-tab>
</ngb-tabset>
我使用的设计创建了如下所示的设计
有谁能告诉我如何设计上述选项卡吗?试试这个。它应该会起作用
.nav-link.active, .nav-pills .show > .nav-link {
background-color: #CD853F !important;
color: white !important;
border-radius: 0;
border: 3px solid #CD853F;
padding-bottom: 2px;
}
.nav-link {
margin-bottom: 25px !important;
color: #CD853F !important;
border: 3px solid #CD853F !important;
}
.nav-tabs{
border-bottom: 0 !important;
}
我不确定您使用的变量,所以我用十六进制值替换了它们。对@M解决方案的一些更改
.nav-link.active, .nav-pills .show > .nav-link {
background-color: $primary !important;
color: white !important;
border-radius: 0;
border-bottom: 3px solid $primary;
padding-bottom: 2px;
}
.nav-link {
margin-bottom: 25px !important;
color: $primary !important;
border: 3px solid $primary !important;
}
.nav-tabs .nav-link{
border-top-left-radius: 0rem;
border-top-right-radius: 0rem;
}
.nav-tabs .nav-link.active {
border: 6px solid #9f8148 !important;
}
.nav-link.active, .nav-pills .show > .nav-link {
background-color: $primary !important;
color: white !important;
border-radius: 0;
border-bottom: 3px solid $primary;
padding-bottom: 2px;
}
.nav-link {
margin-bottom: 25px !important;
color: $primary !important;
border: 3px solid $primary !important;
}
.nav-tabs .nav-link{
border-top-left-radius: 0rem;
border-top-right-radius: 0rem;
}
.nav-tabs .nav-link.active {
border: 6px solid #9f8148 !important;
}