移除选项卡组的底部边框

Question

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

下面是一个代码示例项目：

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

Answer 1

可以在 .mat-tab-header class 上找到边框。

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

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

然后在您的 HTML 文件中，给 mat-tab-group 一个 class。

<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">

Reference to the docs

移除选项卡组的底部边框

Remove bottom border of tab group

angular-material2

angular