英文:

How to make CDK Angular stepper vertical

问题

如何将自定义的Angular CDK Stepper示例中的方向更改为垂直，网址为：https://material.angular.io/cdk/stepper/examples，因为我无法更改它，即使我将方向设置为垂直也不起作用。

英文:

Please, how can we change the orientation to vertical for the custom angular cdk stepper in this example provided by their site:

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

because I can't change it, even if i set the orientation to vertical it doesn't take effect.

答案1

得分: 1

### CDK 不提供样式
仅通过设置 `orientation` 属性无法实现。组件开发工具包 (CDK) 只是一组 API，用于帮助您构建自己的组件，也用于 `@angular/material` 库。

要查看垂直的 `mat-stepper` 如何工作（它基于 `cdkStepper`），您可以查看此 [GitHub 目录](https://github.com/angular/components/tree/main/src/material/stepper)

### 如何实现？
如果您想将 `cdkStepper` 设为垂直，您将需要为其编写自己的 `css`。如果您需要在方向之间切换，您可以使用 `orientation` 属性，例如在 `ngIf` 或 `ngSwitch` 中，就像 `mat-stepper` 所做的那样。

[这里](https://stackblitz.com/edit/rkkppi?file=src/app/example-custom-stepper.css) 是一个非常简单的示例，基于 [文档](https://material.angular.io/cdk/stepper/examples) 中的示例。

```css
.example-step-navigation-bar {
  display: flex;
  flex-direction: column; /* <-- 这是新增的一行  */
  justify-content: flex-start;
  margin-top: 10px;
}

编辑

要实现内容与步进器并列的状态，您需要在 css 中做一些其他更改，将 .container 设置为 flex，因为它会将元素放在一行中。

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

还需要对一些 HTML 进行调整。我们需要调整 html 以包含两列，我们将通过将内容部分包装在带有 .example-step-content 类的 div 中来实现这一点。

<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)"
    >
      步骤 {{ i + 1 }}
    </button>
    <button class="example-nav-button" cdkStepperNext>&rarr;</button>
  </div>
  <div class="example-step-content">
    <header>
      <h2>步骤 {{ selectedIndex + 1 }}/{{ steps.length }}</h2>
    </header>
    <div [ngTemplateOutlet]="selected ? selected.content : null"></div>
  </div>
</section>

通过这些修改，我们拥有了两列，左侧是步进器导航栏，右侧是内容。我也更新了 演示

<details>
<summary>英文:</summary>



### CDK Doesn&#39;t provide stylings 
It&#39;s not possible to do it with just setting the `orientation` property. Component development kit (CDK) is just a collection of API&#39;s to help you build your own components and it&#39;s also used for the `@angular/material` library.

To check how the vertical `mat-stepper` works (it&#39;s based on the `cdkStepper`) you can check this [directory on GitHub](https://github.com/angular/components/tree/main/src/material/stepper)

### How to do it?
In case you want to make the `cdkStepper` vertical you will have to write your own `css` for it. If you need to switch between orientations you can use the property `orientation` for example in `ngIf` or `ngSwitch` as the `mat-stepper` does.

[Here](https://stackblitz.com/edit/rkkppi?file=src/app/example-custom-stepper.css) is a very simple example of how you can do it based on the example from 
(https://material.angular.io/cdk/stepper/examples)

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

EDIT

To achieve the state that the content is next to the stepper you need to do few more change in css, set the .container to be flex, because it will put the elements in one row.

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

and some HTML changes. We need to adjust the html to consist of two columns, we will achieve this by wrapping the content part into div with .example-step-content class.

<section class="example-container">
  <div class="example-step-navigation-bar">
    <button class="example-nav-button" cdkStepperPrevious>←</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>→</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>

With this modifications we have two columns, left with the stepper navigation bar and right with the content. I have also updated the demo