typescript - Jak udělat CDK Angular krokový ovladač vertikální

Prosím, jak můžeme změnit orientaci na vertikální pro vlastní Angular CDK stepper v tomto příkladu poskytnutém na jejich stránkách:

https://material.angular.io/cdk/stepper/examples

protože to nemohu změnit, i když nastavím orientaci na svislou, nemá to žádný účinek.

Odpověď č. 1

CDK neposkytuje stylování

Není možné to udělat jen nastavením vlastnosti orientation. Component development kit (CDK) je jen sbírka API, která vám pomáhá vytvářet vlastní komponenty, a je také používán pro knihovnu @angular/material.

Chcete-li zkontrolovat, jak funguje vertikální mat-stepper (je založen na cdkStepper), můžete se podívat na tento adresář na GitHubu

Jak na to?

V případě, že chcete, aby byl cdkStepper vertikální, budete si muset napsat vlastní css. Pokud potřebujete přepínat mezi orientacemi, můžete použít vlastnost orientation, například v ngIf nebo ngSwitch, stejně jako to dělá mat-stepper.

Zde je velmi jednoduchý příklad toho, jak to můžete udělat na základě příkladu z dokumentace

.example-step-navigation-bar {
  display: flex;
  flex-direction: column; /* <-- This is the added line  */
  justify-content: flex-start;
  margin-top: 10px;
}

UPRAVIT

Aby bylo dosaženo stavu, kdy je obsah vedle krokového ovladače, je potřeba provést několik dalších změn v CSS, nastavit .container na flex, protože to umístí prvky do jednoho řádku.

.example-container {
  border: 1px solid;
  padding: 10px;
  margin: 10px;
  display: flex;
}

a některé změny v HTML. Musíme upravit HTML tak, aby se skládalo ze dvou sloupců, čehož dosáhneme zabalením části obsahu do div s třídou .example-step-content.

<section class="example-container">
  <div class="example-step-navigation-bar">
    <button class="example-nav-button" cdkStepperPrevious>&larr;</button>
    <button
      class="example-step"
      [class.example-active]="selectedIndex === i"
      *ngFor="let step of steps; let i = index"
      (click)="selectStepByIndex(i)"
    >
      Step {{ i + 1 }}
    </button>
    <button class="example-nav-button" cdkStepperNext>&rarr;</button>
  </div>
  <div class="example-step-content">
    <header>
      <h2>Step {{ selectedIndex + 1 }}/{{ steps.length }}</h2>
    </header>

    <div [ngTemplateOutlet]="selected ? selected.content : null"></div>
  </div>
</section>

S těmito úpravami máme dva sloupce, vlevo s navigační lištou krokovače a vpravo s obsahem. Také jsem aktualizoval demo.