- 首页
- 前端开发
- 如何在 mat-horizontal-stepper 中为不同的形式设置不同的宽度
如何在 mat-horizontal-stepper 中为不同的形式设置不同的宽度
[英] How to set different width for different form in mat-horizontal-stepper
本文介绍了如何在 mat-horizontal-stepper 中为不同的形式设置不同的宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在mat-step中为不同的表单设置不同的宽度.第一个表单的内容为400px的宽度，第二个表单的内容为700px的宽度.
<mat-step [stepControl]="firstFormGroup"><form [formGroup]="firstFormGroup"><ng-template matStepLabel>填写你的名字</ng-template><div style="width:400px"><mat-form-field><input matInput placeholder="Last name, First name" formControlName="firstCtrl" required></mat-form-field>
<div><button mat-button matStepperNext>Next</button>
</表单></mat-step><mat-step [stepControl]="secondFormGroup"><form [formGroup]="secondFormGroup"><ng-template matStepLabel>填写您的地址</ng-template><div style="width:700px"><mat-form-field><input matInput placeholder="Address" formControlName="secondCtrl" required></mat-form-field>
<div><button mat-button matStepperPrevious>返回</button><button mat-button matStepperNext>Next</button>
</表单></mat-step><垫步><ng-template matStepLabel>完成</ng-template>你现在已经完成了.<div><button mat-button matStepperPrevious>返回</button><button mat-button (click)="stepper.reset()">重置</button>
</mat-step></mat-horizontal-stepper>
但它不起作用，任何人都可以帮助我如何实现这一点.
解决方案
由于只有 mat-step 组件 的可见性发生了变化，因此您应该覆盖不可见部分的宽度.
在 CSS 文件中使用以下代码:
::ng-deep .mat-horizontal-stepper-content[aria-expanded="false"] {宽度:0px！重要；}
使用此功能后，您可以为每一步使用不同的宽度大小.
I want to set different width for different form in mat-step.The content in first form to be as width of 400px and the second form content to be as width of 700px.
<mat-horizontal-stepper labelPosition="bottom" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<div style="width:400px">
<mat-form-field>
<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
</mat-form-field>
</div>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<div style="width:700px">
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
</div>
<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>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>
But it is not working , Can anyone please help me how to achieve this.
解决方案
Since only the visibility of the mat-step components are changing you should overwrite the width of the invisible ones.
Use the following code in the CSS file:
::ng-deep .mat-horizontal-stepper-content[aria-expanded="false"] {
width: 0px !important;
}
After using this you can use different width sizes for every step.
这篇关于如何在 mat-horizontal-stepper 中为不同的形式设置不同的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
