在材料设计选项卡的底部添加三角形墨垫 [英] Add triangle at bottom of material design tab mat-ink-bar

问题描述

我想为

解决方案

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

  .mat-tab-label {职位:相对}.mat-tab-header，.mat-tab-label-container，.mat-ripple {溢出:继承！重要;}.mat-ink-bar:之后{内容: "";位置:绝对；顶部:48px；正确:0；左:0；保证金:0自动;宽度:0;高度:0；border-top:实心20px#673ab7;左边框:实心20px透明；右边框:实心20px透明；} 

结帐 stackblitz

I want to change the style of the mat-ink-bar for Angular material tab.

I wanted to archieve a design like this: Jsfiddle example

The problem is that the mat-ink-bar already absolute positioned and i cannot display my ::after element. Is there a way how i can archieve this ?

Here is what i tried on stackblitz: Mat tab on stackblitz

my style are located inside the style.css. The triangle at the bottom is hidden if you use the dev tool. I could not show it using z-index.. Any help would be appreciated.

here the code:

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>

should look like this:

解决方案

Update following css will resolve your issue.

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

Checkout stackblitz

这篇关于在材料设计选项卡的底部添加三角形墨垫的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！