gpt4 book ai didi

css - Angular Material Tab 事件链接放置下拉箭头

转载 作者:行者123 更新时间:2023-11-28 10:25:47 26 4
gpt4 key购买 nike

我是 Angular 的初学者,我尝试做一些 Angular 选项卡事件线条来替换一些箭头,但它不起作用,任何人都知道如何正确地做到这一点

stackblitz sample here

代码

<mat-tab-group>
<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>

CSS

/* active tab */
::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active {
color:#0f2241;
background-color: lightgrey;
}

/* ink bar */
::ng-deep .mat-ink-bar {
background-color:red !important; background: url('../../../assets/sg-img/drop-down-arrow.png');
}

谢谢

最佳答案

不要使用 ::ng-deep,而是将组件的 ViewEncapsulation 设置为无:

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
selector: 'tab-group-stretched-example',
templateUrl: 'tab-group-stretched-example.html',
styleUrls: ['tab-group-stretched-example.css'],
encapsulation: ViewEncapsulation.None
})
export class TabGroupStretchedExample {}

然后使用以下 CSS(我不得不使用另一个箭头,因为您在 stackblitz 中使用了本地引用):

.example-stretched-tabs {
max-width: 800px;
}
/* active tab */
.mat-tab-list .mat-tab-labels .mat-tab-label-active {
color:#0f2241;
background-color: lightblue;
opacity: 1;
}

/* ink bar */
.mat-tab-group.mat-primary .mat-ink-bar {
background: none;
content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
height: 10px;
}

这是您要找的吗:stackblitz

关于css - Angular Material Tab 事件链接放置下拉箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52311482/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com