在 material 设计选项卡底部添加三角形 mat-ink-bar

Question

我想为 Angular material tab 更改 mat-ink-bar 的样式。

我想完成这样的设计：Jsfiddle example

问题是 mat-ink-bar 已经 absolute 定位，我无法显示我的 ::after 元素。有什么办法可以实现这个吗？

这是我在 stackblitz 上尝试过的：Mat tab on stackblitz

我的风格都位于style.css里面。如果使用开发工具，底部的三角形会隐藏。我无法使用 z-index 显示它。任何帮助将不胜感激。

这里是代码：

css

.c-tab .mat-ink-bar {
  height: 5px;
}

.c-tab .mat-ink-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 50px #3f51b5;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}

html

<mat-tab-group class="c-tab">
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

应该是这样的：

Answer 1

您的 ::after 元素缺少 display:block。所以块属性不适用。此外，您还使用 top、left、right 和 bottom.

拉伸 ::after 的宽度以匹配其父项

定位到左上角或右下角，不能同时定位到两者`

Answer 2

css 之后的更新将解决您的问题。

.mat-tab-label {
  position: relative;
}
.mat-tab-header,
.mat-tab-label-container,
.mat-ripple {
  overflow: inherit !important;
}
.mat-ink-bar:after {
  content: "";
  position: absolute;
  top: 48px;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-top: solid 20px #673ab7;
  border-left: solid 20px transparent;
  border-right: solid 20px transparent;
}

结帐stackblitz

Answer 3

.c-tab .mat-ink-bar {
  position:relative
}

试试这个 ^^...

理论上这就是您所需要的：更新 https://jsfiddle.net/Rakowu/e42wng0m/4/

在 material 设计选项卡底部添加三角形 mat-ink-bar

Add triangle at bottom of material design tab mat-ink-bar

html

css

angular

angular-material

mat-tab