移除选项卡组的下边框

Question

我想删除选项卡组的底部边框，下图中为灰色。

这是一个显示代码的示例项目：

https://stackblitz.com/edit/angular-tabs-remove-bottom-border

Answer 1

边框可以在

.mat-tab-header

类上找到。

在 main.css 文件（或 main.scss、styles.css 或 styles.scss）中，您可以全局定义

.remove-border-bottom .mat-tab-header {
    border-bottom: none;
}

在您的 HTML 文件中，为

mat-tab-group

指定一个类。

<mat-tab-group class="remove-border-bottom">
    <!-- ... -->
</mat-tab-group>

由于封装的原因，如果你想在你的component.scss文件中定义样式，你必须使用

::ng-deep

:

.remove-border-bottom ::ng-deep .mat-tab-header {
    border-bottom: none;
}

Answer 2

使用它并选择背景颜色：

::ng-deep .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
  background-color: white; // add styles properties here
}

Answer 3

将

color="transparent"

添加到

mat-tab-group

。

无颜色属性：

这是颜色属性的结果：

像这样：

  <mat-tab-group color="transparent">

参考文档

Answer 4

对于 Angular Material 15+，类名称为

mdc-tab-indicator

。

HTML

 <mat-tab-group class="no-active-tab-indicator">
    ...
 </mat-tab-group>

CSS

.no-active-tab-indicator .mdc-tab-indicator{
   display:none 
}

Answer 5

在我的 Components.scss 文件中，我刚刚编写了这个来更改边框的颜色

::ng-deep {
  .mdc-tab-indicator__content--underline {
    border-color: red!important;
  }
}

或者你可以使用 display: none 来删除边框

::ng-deep {
  .mdc-tab-indicator__content--underline {
    display: none;
  }
}