我有一个动态的标签系统,并且由于设计的原因,每当一个标签处于活动状态时,它都会变为蓝色和其下方的一行。问题是我需要该行以灰色占据屏幕的整个宽度,并且出现蓝线,表明活动选项卡刚好在同一条灰线上。这是我的html
<div class="tabs d-flex flex-row">
<div *ngFor='let category of this.market; let i = index'>
<h2 (click)="selectedTab = i" [ngStyle]="selectedTab === i && {'border-bottom':'4px solid #0E5FA4', 'color':'#0E5FA4'}">{{category.name}}</h2>
</div>
</div>
这是我在CSS中创建灰线的位置
.tabs {
border-bottom: 4px solid #DCE0E6;
margin-bottom: 20px;
}
正如我现在所拥有的,在蓝线下方有一条灰色线表示活动文本。我需要创建的是灰色线条的效果,该线条在活动选项卡文本的正下方具有蓝色的拉伸。这是一个堆栈闪电链接https://angular-ivy-er17vx.stackblitz.io。知道如何实现吗?
请尝试使用此CSS:
p {
font-family: Lato;
}
.tabs {
display: flex;
height: 80px;
border-bottom: 4px solid #DCE0E6;
margin-bottom: 20px;
}
.tabs > div > h2 {
margin:0;
padding: 20px 4px 10px 4px;
height: 50px;
}
更可靠的解决方案是使用angular material tabs