css - 自定义动画角度材质选项卡

Question

我有一个问题，我正在使用 Angular Material 选项卡 ( https://material.angular.io/components/tabs )

默认情况下，我有几个效果，改变内容的“幻灯片”效果和我选项卡后面的黑色效果。我能够删除“幻灯片”效果，但我不知道如何修改/删除黑色效果？ ??

黑色效果 1

黑色效果 2

有人可以帮助我吗？

我的 html ：

<mat-tab-group class="navBar" [@.disabled]="true">
<mat-tab label="all">
    <ng-template mat-tab-label>
        <div (mouseover)="iconAllOn=true" (mouseout)="iconAllOn=false">
            <img class="logoNavBar" *ngIf="!iconAllOn" [src]="cheminImageAllOff">
            <img class="logoNavBar" *ngIf="iconAllOn"[src]="cheminImageAllOn">
        </div>
    </ng-template> 
    Content 1
</mat-tab>

标签： cssangularangular-material

Answer 1

这种黑色效果就是材质波纹效果。

通过向您的结构添加一个新的 div 来实现效果：

您可以通过使用 CSS 定位元素或使用组件的disableRipple输入参数来删除它MatTabNav（看这里）或MatTabGroup（这里）