1

我想更改Angular 材质选项卡的 样式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>

应该是这样的： 在此处输入图像描述

4

3 回答 3

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;
}

结帐堆栈闪电战

于 2018-11-30T09:50:30.833 回答
0 
.c-tab .mat-ink-bar {
  position:relative
}

试试这个^^...

从理论上讲，这就是您所需要的： updatet https://jsfiddle.net/Rakowu/e42wng0m/4/

于 2018-11-30T09:53:20.747 回答
0

你缺少display:block你的::after元素。所以块属性不适用。此外，您正在使用、和拉伸的宽度::after以匹配其父级。topleftrightbottom

定位在左上角或右下角，而不是两者兼而有之`

于 2018-11-30T09:34:43.567 回答