使用 Angular material 制作一个具有 24 个步骤的响应式步进器？是否有任何替代的响应式步进器选项？

Question

如何使用 Angular material 使 24 步步进器响应？是否有任何替代的响应式步进器选项来实现相同的目标？

我已经尝试过 container-fluid，但在某个时间点后没有任何效果我只能在小屏幕上查看 6 个步骤。

下面我用过StackBlitz to create the 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>

Answer 1

在 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 中添加操作和 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]
    });

.......

它会起作用

Answer 2

我的英文太烂了，我又来找你看看你的问题解决了吗？我垂直和水平地尝试了我的解决方案，我给出了 10 多个部分我想了想，你为什么不做一个菜单栏？像这样：

<mat-toolbar color="primary">

  <button mat-button [mat-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
    <mat-icon>menu</mat-icon>
  </button>

  <mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item  routerLink="/1">1</button>
    <button mat-menu-item routerLink="/2">2</button>
    <button mat-menu-item routerLink="/3">3</button>
    <button mat-menu-item routerLink="/4"> 4</button>
    <button mat-menu-item routerLink="/5">5 </button>
    <button mat-menu-item routerLink="/6"> 6 </button>
    <button mat-menu-item routerLink="/7"> 7 </button>
    <button mat-menu-item routerLink="/8"> 8</button>
    <button mat-menu-item routerLink="/9"> 9 </button>
    <button mat-menu-item routerLink="/10">10 </button>
    <button mat-menu-item routerLink="/11"> 11 </button>
    <button mat-menu-item routerLink="/12"> 12 </button>
    <button mat-menu-item routerLink="/13"> 13 </button>
    <button mat-menu-item routerLink="/14"> 14 </button>
    <button mat-menu-item routerLink="/15"> 15 </button>
    <button mat-menu-item routerLink="/16">  16 </button>
    <button mat-menu-item routerLink="/17"> 17 </button>
    <button mat-menu-item routerLink="/18">18 </button>
    <button mat-menu-item routerLink="/19">19</button>
    <button mat-menu-item routerLink="/20">20 Croisé</button>
    <button mat-menu-item routerLink="/21">21</button>
    <button mat-menu-item routerLink="/22">2</button>
    <button mat-menu-item routerLink="/23">23</button>
    <!--<button mat-menu-item>Help</button>-->
  </mat-menu>
  </mat-toolbar>

你只需要组织你的生根，你就可以拥有相同的功能？

使用 Angular material 制作一个具有 24 个步骤的响应式步进器？是否有任何替代的响应式步进器选项？

Make a responsive stepper with 24 steps using Angular material? Is there any alternate responsive stepper option for the same?

css

angular-material

responsive

angular