在材料设计选项卡 mat-ink-bar 底部添加三角形 [英] Add triangle at bottom of material design tab mat-ink-bar
本文介绍了在材料设计选项卡 mat-ink-bar 底部添加三角形的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想为
解决方案
更新以下 css 将解决您的问题.
.mat-tab-label {位置:相对;}.mat-tab-header,.mat-tab-label-container,.mat-波纹{溢出:继承!重要;}.mat-ink-bar:after {内容: "";位置:绝对;顶部:48px;右:0;左:0;边距:0 自动;宽度:0;高度:0;边框顶部:实心 20px #673ab7;border-left:实心20px透明;border-right: 实心 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
这篇关于在材料设计选项卡 mat-ink-bar 底部添加三角形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文