Question

我正在尝试使用角材料 (https://material.angular.io/components/tabs/api) 中的标签

doc指定有一个isacity属性，但我不知道如何使用它，如何更改我的映像（当标签处于活动状态时）我在我的expple中做错了什么？

<mat-tab label="all" isActive="iconAllOn=true">
    <ng-template mat-tab-label>
        <div (mouseover)="iconAllOn=true" (mouseout)="iconAllOn=false">
            <img class="logoNavBar" *ngIf="!iconAllOn" [src]="imagePathAllOff">
            <img class="logoNavBar" *ngIf="iconAllOn" [src]="imagePathAllOn">
        </div>
    </ng-template> 
    Content 1
</mat-tab>

Answer 1

isActive 不是 @Input 属性，您无法为其设置值。检查以下示例，此处使用表单字段设置活动选项卡。 https://stackblitz.com/angular/dgkalqaqdlv?file=src%2Fapp%2Ftab-group-dynamic-example.ts

MatTabGroup 支持设置选定的索引。 API

你想在 mouseHover 上设置一些样式吗？活动标签样式可以以不同的方式完成

这是一个例子：

https://stackblitz.com/angular/mkjxrrgbdak?file=src%2Fstyles.scss

我已经添加了基本样式，这不是设置标签样式的正确方法，但可以实现。

角材料选项卡是活动的

1 个答案: