我怎样才能专注于特定的 mat-tab
How can I focus on an specific mat-tab
<mat-tab-group mat-stretch-tabs #tabGroup (focusChange)="tabChanged($event)" [selectedIndex]="0">
<mat-tab label="DATOS EXPEDIENTE">
<div class="example-large-box mat-elevation-z4">
<app-informe-expediente></app-informe-expediente>
</div>
</mat-tab>
<mat-tab label="DATOS ALTERACIÓN">
<div class="example-large-box mat-elevation-z4">
<app-informe-alteracion></app-informe-alteracion>
</div>
</mat-tab>
<mat-tab label="DATOS INMUEBLES">
<div class="example-large-box mat-elevation-z4">
<app-informe-inmuebles></app-informe-inmuebles>
</div>
</mat-tab>
<mat-tab label="FLUJO DE TRAMITACIÓN">
<div class="example-large-box mat-elevation-z4">
<app-informe-tramitacion></app-informe-tramitacion>
</div>
</mat-tab>
<mat-tab label="DOCUMENTOS ASOCIADOS">
<div class="example-large-box mat-elevation-z4">
<app-informe-documentos></app-informe-documentos>
</div>
</mat-tab>
</mat-tab-group>
这是我的 mat-tab-group
,它依赖于浏览器,因此每次我单击提交按钮时它都会触发。我需要知道每次单击我的提交按钮时如何获得索引为 0 的第一个选项卡以集中注意力。
我知道它与索引和其他东西有关,但我不知道,我正在使用 MatTabChangeEvent 控制索引。
您可以在 selectedIndex
上使用双向绑定来跟踪选择了哪个选项卡,并在单击按钮时将 selectedIndex
设置为 0
模板
<mat-tab-group [(selectedIndex)]=selectedIndex>
<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>
<button mat-raised-button (click)="selectedIndex = 0">
Reset tab
</button>
组件
@Component({
selector: 'tab-group-basic-example',
templateUrl: 'tab-group-basic-example.html'
})
export class TabGroupBasicExample {
selectedIndex = 0;
}
我尝试使用 ::ng-deep.mat-tab-label-active
并且它可以将不透明度更改为 1.0 仅适用于活动焦点选项卡。
您可以使用此代码:
::ng-deep.mat-tab-label-active{
opacity: 1.0!important;
}
<mat-tab-group mat-stretch-tabs #tabGroup (focusChange)="tabChanged($event)" [selectedIndex]="0">
<mat-tab label="DATOS EXPEDIENTE">
<div class="example-large-box mat-elevation-z4">
<app-informe-expediente></app-informe-expediente>
</div>
</mat-tab>
<mat-tab label="DATOS ALTERACIÓN">
<div class="example-large-box mat-elevation-z4">
<app-informe-alteracion></app-informe-alteracion>
</div>
</mat-tab>
<mat-tab label="DATOS INMUEBLES">
<div class="example-large-box mat-elevation-z4">
<app-informe-inmuebles></app-informe-inmuebles>
</div>
</mat-tab>
<mat-tab label="FLUJO DE TRAMITACIÓN">
<div class="example-large-box mat-elevation-z4">
<app-informe-tramitacion></app-informe-tramitacion>
</div>
</mat-tab>
<mat-tab label="DOCUMENTOS ASOCIADOS">
<div class="example-large-box mat-elevation-z4">
<app-informe-documentos></app-informe-documentos>
</div>
</mat-tab>
</mat-tab-group>
这是我的 mat-tab-group
,它依赖于浏览器,因此每次我单击提交按钮时它都会触发。我需要知道每次单击我的提交按钮时如何获得索引为 0 的第一个选项卡以集中注意力。
我知道它与索引和其他东西有关,但我不知道,我正在使用 MatTabChangeEvent 控制索引。
您可以在 selectedIndex
上使用双向绑定来跟踪选择了哪个选项卡,并在单击按钮时将 selectedIndex
设置为 0
模板
<mat-tab-group [(selectedIndex)]=selectedIndex>
<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>
<button mat-raised-button (click)="selectedIndex = 0">
Reset tab
</button>
组件
@Component({
selector: 'tab-group-basic-example',
templateUrl: 'tab-group-basic-example.html'
})
export class TabGroupBasicExample {
selectedIndex = 0;
}
我尝试使用 ::ng-deep.mat-tab-label-active
并且它可以将不透明度更改为 1.0 仅适用于活动焦点选项卡。
您可以使用此代码:
::ng-deep.mat-tab-label-active{
opacity: 1.0!important;
}