[英]Angular Material - Collapse inactive steps of Stepper
I have a Stepper from @Angular/Material and it looks great. 我有一个来自@ Angular / Material的步进器,它看起来很棒。 However, I see many example that have only the current step opened up.
但是,我看到了很多仅打开当前步骤的示例。 I would like this functionality.
我想要这个功能。 All inactive steps should be closed.
所有不活动的步骤均应关闭。
[EDIT]: Just added in the HTML and TS file. [编辑]:刚刚添加到HTML和TS文件中。
Component HTML File 组件HTML文件
<img width="350px" align="middle" mat-card-image src="../assets/Icon_Rev8.png" alt="Logo">
<mat-card-content>
<mat-tab-group mat-stretch-tabs [selectedIndex]="0" dynamicHeight=true>
<mat-tab label="Login">
<form>
<mat-form-field class="sameWidth">
<input matInput style="width:100%;" placeholder="Username">
</mat-form-field>
<mat-form-field class="sameWidth">
<input matInput style="width:100%;" placeholder="Password">
</mat-form-field>
</form>
<button class="sameWidth" mat-raised-button color="primary">Login</button>
<button class="sameWidth" mat-button color="primary">Forgot Password?</button>
</mat-tab>
<mat-tab label="Register">
<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
<mat-vertical-stepper [linear]=true>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field>
<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [active]="true" [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
</div>
</mat-step>
</mat-vertical-stepper>
<!--<form>
<table cellspacing="0">
<tr>
<td>
<mat-form-field>
<input style="width: 40%;" matInput placeholder="First Name">
</mat-form-field>
</td>
<td>
<mat-form-field>
<input style="width: 40%;" matInput placeholder="Last name">
</mat-form-field>
</td>
</tr>
</table>
<mat-form-field style="width:100%;">
<input matInput placeholder="Password">
</mat-form-field>
</form>-->
<mat-checkbox style="z-index: 1000;" color="primary">I Agree to the Terms and Conditions</mat-checkbox>
<button class="sameWidth" mat-raised-button color="primary">Register</button>
</mat-tab>
</mat-tab-group>
</mat-card-content>
Component TS File 组件TS文件
import { Component, OnInit, ViewEncapsulation, Inject } from "@angular/core";
import {
MatIconRegistry,
MatDialog,
MatDialogRef,
MAT_DIALOG_DATA
} from "@angular/material";
import { DomSanitizer } from "@angular/platform-browser";
import { HttpClientModule, HttpClient } from "@angular/common/http";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
@Component({
selector: "app-login",
templateUrl: "login.component.html",
styleUrls: ["login.component.css"]
})
export class LoginComponent {
animal: string;
name: string;
constructor(
private _formBuilder: FormBuilder,
iconRegistry: MatIconRegistry,
sanitizer: DomSanitizer,
public dialog: MatDialog
) {
iconRegistry.addSvgIcon(
"close",
sanitizer.bypassSecurityTrustResourceUrl(
"assets/icons/ic_close_48px.svg"
)
);
}
openDialog(): void {
let dialogRef = this.dialog.open(LoginDialogComponent, {
width: "400px",
data: { name: this.name, animal: this.animal }
});
dialogRef.afterClosed().subscribe(result => {
console.log("The dialog was closed");
this.animal = result;
});
}
}
@Component({
selector: "dialog-login",
templateUrl: "loginDialog.component.html",
styleUrls: ["loginDialog.component.css"]
})
export class LoginDialogComponent {
constructor(
private _formBuilder: FormBuilder,
public dialogRef: MatDialogRef<LoginDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {}
onNoClick(): void {
this.dialogRef.close();
}
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ["", Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
secondCtrl: ["", Validators.required]
});
}
}
My Current Status: 我目前的状态:
My Goal: 我的目标:
I just copy pasted your code in default angular-material stepper code and it's showing like your goal 我只是将您的代码复制到默认的角材料步进代码中,结果就像您的目标一样
https://stackblitz.com/edit/angular-tpeo6s?embed=1&file=app/stepper-overview-example.html https://stackblitz.com/edit/angular-tpeo6s?embed=1&file=app/stepper-overview-example.html
Edit 编辑
It seems angular material bug to me. 对我来说似乎是有角度的材料错误。
if stepper is put out of tabs, it is working but inside tab, though aria-expanded="false"
for inactive steps , material is not adding style="height: 0px; visibility: hidden;"
如果stepper不在选项卡中,则可以使用,但
aria-expanded="false"
选项卡中,尽管aria-expanded="false"
用于不活动的步骤,但材质未添加style="height: 0px; visibility: hidden;"
to hide inactive steps. 隐藏不活动的步骤。
you can log issues related to angular material 2 HERE 您可以在此处记录与角材有关的问题2
There is no official fix yet. 尚无官方修补程序。 I have submitted a bug-report and it is being looked into.
我已经提交了一个错误报告,正在对其进行调查。 For now I have researched and found a workaround for this issue.
目前,我已经研究并找到了解决此问题的方法。 I had to add
(selectionChange)="cambiaStep($event)"
as an attribute to my <mat-vertical-stepper>
tag. 我必须将
(selectionChange)="cambiaStep($event)"
为<mat-vertical-stepper>
标记的属性。 Then I had to add a <ng-container>
under all of my <mat-step>
tags. 然后,我必须在所有
<mat-step>
标签下添加一个<ng-container>
。 In each corresponding <ng-container>
, I had to set an attribute based on which position it had in the stepper order. 在每个对应的
<ng-container>
,我必须根据其在步进顺序中的位置来设置属性。 In each <ng-container>
I had to add *ngIf="stepIndex === 0"
but the 0
was based on its order in the steps (0: first, 1: second, 2: third, etc.) 在每个
<ng-container>
我必须添加*ngIf="stepIndex === 0"
但是0
是基于其在步骤中的顺序(0:第一,1:第二,2:第三等)。
My stepper ended up having code as such: 我的步进器最终得到了这样的代码:
<mat-vertical-stepper (selectionChange)="cambiaStep($event)">
<mat-step>
<ng-container *ngIf="stepIndex === 0">
</ng-container>
</mat-step>
<mat-step>
<ng-container *ngIf="stepIndex === 1">
</ng-container>
</mat-step>
<mat-step >
<ng-container *ngIf="stepIndex === 2">
</ng-container>
</mat-step>
</mat-vertical-stepper>
I also had to add the event function in my component's *.ts file. 我还必须在组件的* .ts文件中添加事件函数。
export class LoginDialogComponent {
stepIndex: number = 0;
cambiaStep(e) {
this.stepIndex = e.selectedIndex;
}
constructor() {}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.