使用Angular材料制作一个24步的响应式步进器?是否有相同的替代响应步进器选项

Question

如何使用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>

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>

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