如何解决“ mat-tab-nav-bar”角度中“ mat-group”的当前选项卡下的线的功能
由于路由原因,我使用mat-tab-nav-bar而不是mat-group。但是在垫组中,当前选项卡下有一个“蓝色”线。在“ mat-tab-nav-bar”中是否有可能获得相同的功能?
解决方法
我该如何添加“ border-bottom:blue;”
我的代码看起来像这样
<nav mat-tab-nav-bar>
<a mat-tab-link routerLink="">Home</a>
<a mat-tab-link routerLink="Login">User Login</a>
<a mat-tab-link routerLink="Registration">User Registration</a>
</nav>
<router-outlet></router-outlet>
,
您可以将元素的样式设置为:
border-bottom: blue;
编辑:
您可以分享自己拥有的东西。可能是这样的:
.mat-tab-group.mat-primary .mat-ink-bar,.mat-tab-nav-bar.mat-primary .mat-ink-bar {
background-color: blue;
}
,
您缺少routerLinkActive,只需放置以下代码即可使用。
<nav mat-tab-nav-bar>
<a mat-tab-link
routerLink=""
routerLinkActive
#rla1="routerLinkActive"
[routerLinkActiveOptions]="{exact:true}"
[active]="rla1.isActive">Home</a>
<a mat-tab-link
routerLink="Login"
routerLinkActive
[routerLinkActiveOptions]="{exact:true}"
#rla2="routerLinkActive"
[active]="rla2.isActive">User Login</a>
<a mat-tab-link
routerLink="Registration"
routerLinkActive
[routerLinkActiveOptions]="{exact:true}"
#rla3="routerLinkActive"
[active]="rla3.isActive">User Registration</a>
</nav>
<router-outlet></router-outlet>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。