我希望只能通过“下一步”和“上一步”按钮来导航步进器。
由于用户还可以单击每个步骤标签以导航到任何步骤,因此我无法做到这一点。我不能使用线性布局,因为它需要每个步骤都有一个formArray
或FormGroup
。
我尝试过使用<mat-step (click)="$event.stopPropagation()">
。
我希望只能通过“下一步”和“上一步”按钮来导航步进器。
由于用户还可以单击每个步骤标签以导航到任何步骤,因此我无法做到这一点。我不能使用线性布局,因为它需要每个步骤都有一个formArray
或FormGroup
。
我尝试过使用<mat-step (click)="$event.stopPropagation()">
。
将以下内容添加到您的样式表中。我试图禁用页眉导航栏。尝试了许多方法,但这个hack起作用了。在Angular Material团队支持此功能之前,您可以尝试使用它。
::ng-deep .mat-horizontal-stepper-header{
pointer-events: none !important;
}
使用带有completed=false
的linear
步进器。当用户按下按钮时,通过编程方式完成该步骤并移至下一个步骤。
这样您就不需要操作CSS指针事件。在我们的应用中,这导致了与NVDA的可访问性问题。
<mat-horizontal-stepper linear #stepper>
<mat-step completed="false">
<ng-template matStepLabel>Step 1</ng-template>
<app-some-child (nextClicked)="nextClicked($event)" ></app-some-child>
</mat-step>
<mat-step>
<ng-template matStepLabel>Step 2</ng-template>
<app-some-other-child></app-some-other-child>
</mat-step>
</mat-horizontal-stepper>
export class AppComponent implements OnInit {
@ViewChild('stepper') stepper: MatStepper;
nextClicked(event) {
// complete the current step
this.stepper.selected.completed = true;
// move to next step
this.stepper.next();
}
}
editable="false"
添加到您的 mat-step
中。 - dekajoothis.stepper.selected.editable = false
。 - Low没有::ng-deep就不起作用。
::ng-deep .mat-horizontal-stepper-header{
pointer-events: none !important;
}
如果::ng-deep不起作用,仍在寻找替代方案的人可以尝试其他解决方法。
此外,::ng-deep已被弃用,如果您想使用CSS进行操作,则将ViewEncapsulation设置为none是首选方式。
在您的component.ts中导入ViewEncapsulation并将其设置为None:
import { Component, OnInit, ViewEncapsulation } from "@angular/core";
@Component({
selector: "stepper-overview-example",
templateUrl: "stepper-overview-example.html",
styleUrls: ["stepper-overview-example.css"],
encapsulation: ViewEncapsulation.None
})
export class StepperOverviewExample implements OnInit {
isLinear = false;
constructor() {}
ngOnInit() {}
}
pointer-events
设置为 none
。.mat-horizontal-stepper-header {
pointer-events: none !important;
}
Here's a DEMO.
不要使用 ::ng-deep,因为它已经被弃用。
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
如果你正在使用Angular Material,请使用文档中的主题指南。
https://material.angular.io/guide/theming
以下是样式实现的示例:
my-custom-elements.scss
@import '~@angular/material/theming';
@mixin custom-stepper-theme() {
.mat-horizontal-stepper-header {
pointer-events: none;
}
}
global-material-theme.scss
@import '~@angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
@import './material/my-custom-elements.scss';
@include custom-stepper-theme();
angular.json
...
"styles": ["src/styles.scss", "src/app/global-material-theme.scss"]
...
为了改进接受的答案,如果您有垂直步进器,则该答案将无效。
为了防止用户能够单击标题并导航,请在根目录的style.css文件中添加以下代码:
.mat-step-header {
pointer-events: none !important;
}
这将确保它适用于mat-horizontal-stepper-header
和mat-vertical-stepper-header
这对我也起了作用。
要求:
<mat-horizontal-stepper #stepper [linear]="true">
<!----------------------------->
<!---- STEP: 1:---->
<!----------------------------->
<mat-step #generalStep [completed]="formGroup1.valid">
<ng-template matStepLabel>Step-1</ng-template>
<form [formGroup]="formGroup1">
// STEP-1 Content
// matInput - with form control bindings
<div class="container">
<button mat-raised-button matStepperNext color="primary"[disabled]="!formGroup1.valid">Next Step</button>
</div>
</form>
</mat-step>
<!------------------------------->
<!-- STEP: 2:-->
<!------------------------------->
<mat-step #generalStep [completed]="formGroup2.valid">
<ng-template matStepLabel>Step-2</ng-template>
<form [formGroup]="formGroup2">
// STEP-2 Content
// matInput - with form control bindings
<button mat-raised-button matStepperNext color="primary"[disabled]="!formGroup.valid">Next Step</button>
</form>
</mat-step>
</mat-horizontal-stepper>
formGroup1: FormGroup;
formGroup2: FormGroup;
this.formGroup1 = this.formBuilder.group({
control1: new FormControl('', [Validators.required]),
control2: new FormControl('', [Validators.required]),
});
this.formGroup2 = this.formBuilder.group({
control3: new FormControl('', [Validators.required]),
control4: new FormControl('', [Validators.required]),
});
以下内容对我有效,启用“上一步”后单击即可:
::ng-deep .mat-vertical-stepper-header:not([ng-reflect-active="true"]){
pointer-events: none !important;
}
要创建水平步进条,请按照以下步骤进行:
::ng-deep .mat-horizontal-stepper-header:not([ng-reflect-active="true"]){
pointer-events: none !important;
}
首先,您需要在组件配置中添加ViewEncapsulation.None
@Component({
selector: 'app-example',
encapsulation: `ViewEncapsulation.None`
})
然后在您的组件CSS中添加此内容。
.mat-horizontal-stepper-header-container {
display: none !important;
}