时间戳

首页 > 解决方案 > 使用 Angular 材料制作一个 24 步的响应式步进器？是否有任何替代的响应式步进器选项？

css - 使用 Angular 材料制作一个 24 步的响应式步进器？是否有任何替代的响应式步进器选项？

问题描述

如何使用 Angular 材料使 24 步步进器响应？是否有任何替代的响应式步进器选项可以实现相同的效果？

我已经尝试过容器流体，但在某个点之后没有任何效果，我只能在小屏幕上查看 6 个步骤。

我在StackBlitz 下面使用过创建 MatStepper。

这是一个示例代码，如果我需要 28 个步骤以及如何在小屏幕上做出响应？

<mat-horizontal-stepper [linear]="isLinear" #stepper class="container-fluid" style="width: 100%;">
<mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
        <span>Name</span>
        <mat-form-field>
            <mat-label>Name</mat-label>
            <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 [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
        <mat-form-field>
            <mat-label>Address</mat-label>
            <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY" required>
        </mat-form-field>
        <div>
            <button mat-button matStepperPrevious>Back</button>
            <button mat-button matStepperNext>Next</button>
        </div>
    </form>
</mat-step>
<mat-step>
    <p>You are now done.</p>
    <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
</mat-step>

标签： cssangularangular-materialresponsive

解决方案

在 html 中添加您的步骤

<mat-step [stepControl]="thirdFormGroup">
    <form [formGroup]="thirdFormGroup">
        <mat-form-field>
            <mat-label>something</mat-label>
            <input matInput formControlName="thirdCtrl" placeholder="Ex. 1 Main St, New York, NY" required>
        </mat-form-field>
        <div>
            <button mat-button matStepperPrevious>Back</button>
            <button mat-button matStepperNext>Next</button>
        </div>
    </form>
</mat-step>

...........

并在您的 .ts 中添加步骤列表：

firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  thirdFormGroup: FormGroup;
  forthFormGroup: FormGroup;
  cinqFormGroup: FormGroup;
  sixFormGroup: FormGroup;
  septFormGroup: FormGroup;
  huitFormGroup: FormGroup;

……

在 ngOInnit 中添加 action 和 ctrl 列表，如下所示：

this.firstFormGroup = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
    this.thirdFormGroup = this._formBuilder.group({
      thirdCtrl: ['', Validators.required]
    });
    this.forthFormGroup = this._formBuilder.group({
      forthreCtrl: ['', Validators.required]
    });
    this.cinqFormGroup = this._formBuilder.group({
      cinqCtrl: ['', Validators.required]
    });

…………

它会起作用

推荐阅读