时间戳

首页 > 解决方案 > 如何在标签系统中创建动态下划线？

css - 如何在标签系统中创建动态下划线？

问题描述

我有一个动态选项卡系统，并且由于每次选项卡处于活动状态时的设计，它都会将文本和其下的一行变为蓝色。问题是我需要这条线以灰色占据屏幕的整个宽度，并且出现蓝线，指示活动选项卡就在同一条灰线上。这是我的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;
}

正如我现在所拥有的那样，蓝线下方有一条灰线，表示活动文本。我需要创建的是在活动选项卡文本下方有蓝色拉伸的灰线的效果。这是一个 stackblitz 链接https://angular-ivy-er17vx.stackblitz.io。知道如何实现这一目标吗？

标签： cssdynamictabsangular7

解决方案

请试试这个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;
}

闪电战

一个更强大的解决方案是使用有角度的材料标签

推荐阅读