角形材料垂直步进器分离标签和内容部分

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