如何在水平垫板中为不同形式设置不同的宽度 [英] How to set different width for different form in mat-horizontal-stepper

问题描述

我想在mat-step中为不同的表单设置不同的宽度。第一种形式的内容为400px的宽度，第二种形式的内容为700px的宽度。

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.

推荐答案

由于只有 mat-step组件的可见性在改变，因此您应该覆盖宽度

Since only the visibility of the mat-step components are changing you should overwrite the width of the invisible ones.

在 CSS 文件中使用以下代码：

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.

这篇关于如何在水平垫板中为不同形式设置不同的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！