"mat-group" in "mat-tab-nav-bar" (Angular) 当前标签下行的功能

Question

由于路由问题，我使用 mat-tab-nav-bar 而不是 mat-group。但是在垫子组中，当前选项卡下有一条“蓝色”线。 “mat-tab-nav-bar”是否有可能获得相同的功能？

Answer 1

您可以将元素的样式设置为：

border-bottom: blue;

编辑：

你可以分享你所拥有的。可以是这样的：

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: blue;
}

Answer 2

如何添加“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>

Answer 3

您缺少 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>

"mat-group" in "mat-tab-nav-bar" (Angular) 当前标签下行的功能

the function of the line under the current tab of "mat-group" in "mat-tab-nav-bar" (Angular)

angular

mat-tab