src/components-examples/material/stepper/stepper-states/stepper-states-example.html - main - githubmirror/components

src/components-examples/material/stepper/stepper-states/stepper-states-example.html

69 строк2 KB

Kristiyan Kostadinov

refactor(multiple): switch button selectors

14 мар 2025, 09:04

14 мар 2025, 09:04103ac7c

<mat-stepper #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <mat-label>Name</mat-label>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>
      <div>
        <button matButton matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <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 matButton matStepperPrevious>Back</button>
        <button matButton matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    <p>You are now done.</p>
    <div>
      <button matButton matStepperPrevious>Back</button>
      <button matButton (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-stepper>

<!-- #docregion states -->
<mat-stepper>
<!-- #docregion label -->
  <mat-step label="Step 1" state="phone">
    <p>Put down your phones.</p>
    <div>
      <button matButton matStepperNext>Next</button>
    </div>
  </mat-step>
<!-- #enddocregion label -->
  <mat-step label="Step 2" state="chat">
    <p>Socialize with each other.</p>
    <div>
      <button matButton matStepperPrevious>Back</button>
      <button matButton matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step label="Step 3">
    <p>You're welcome.</p>
  </mat-step>

  <!-- Icon overrides. -->
<!-- #docregion override-icons -->
  <ng-template matStepperIcon="phone">
    <mat-icon>call_end</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="chat">
    <mat-icon>forum</mat-icon>
  </ng-template>
</mat-stepper>
<!-- #enddocregion override-icons -->
<!-- #enddocregion states -->