угловой материал вертикальный степпер отдельная этикетка и раздел содержимого

Question

Если я добавлю этот CSS:

mat-step-header{
  display: flex ;
  justify-content: flex-end ;
}

Я пытаюсь заставить этот степпер работать.

Я использовал угловую конструкцию материала для вертикального степпера.Как сделать шаговый заголовок слева и содержимое справа, как в примере здесь .

или есть какой-нибудь модуль?

Answer 1

Наконец я достиг своего дизайна. Надеюсь, что это будет полезно для всех.

HTML:

<mat-vertical-stepper #stepper [@.disabled]="true">
  <mat-step label="Step 1">
      <h2> Step 1</h2>
      <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
    </mat-step>
  <mat-step label="Step 2">
    Step 2
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step label="Step 3">
    Step 3
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step label="Step 4">
    Step 4
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
    </mat-step>
    <mat-step label="Step 5">
    Step 5
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
    </mat-step>

    <mat-step label="Step 6">
    Step 6
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
    </mat-step>

</mat-vertical-stepper>
<div >
  <ul>
  <li class="mytest" [ngClass]="{'active': stepper.selectedIndex == 0}"><a (click)="move(0)">Label 1</a></li>
  <li class="mytest" [ngClass]="{'active': stepper.selectedIndex == 1}"><a (click)="move(1)">Label 2</a></li>
  <li class="mytest" [ngClass]="{'active': stepper.selectedIndex == 2}"><a (click)="move(2)">Label 3</a></li>
  <li class="mytest" [ngClass]="{'active': stepper.selectedIndex == 3}"><a (click)="move(3)">Label 4</a></li>
  <li class="mytest" [ngClass]="{'active': stepper.selectedIndex == 4}"><a (click)="move(4)">Label 5</a></li>
  <li class="mytest" [ngClass]="{'active': stepper.selectedIndex == 5}"><a (click)="move(5)">Label 6</a></li>
</ul>
</div>

TS:

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatStepper} from '@angular/material';

export class implements OnInit {
  isLinear = false;

  @ViewChild('stepper') stepper: MatStepper;

  constructor(private _formBuilder: FormBuilder) {}
   ngOnInit() {
   }
    move(index: number) {
    this.stepper.selectedIndex = index;
  }
}

Вот и все.

Используется с: https://stackblitz.com/edit/angular-demo-matstepper-move?file=app%2Fdemo%2Fdemo.component.html

Answer 2

Примените ниже свойства flex к заголовку mat-step-header, который будет выравнивать только заголовок вправо

mat-step-header{
  display: flex ;
  justify-content: flex-end ;
}