2

我正在做一个带有角材料的垂直步进器。问题是这个步进器将每个步骤的内容放在步骤标题下方，所以如果有很多步骤，它看起来很糟糕，因为你必须滚动。

我的想法是将标题与内容分开，这样它看起来更像是一个sidenav，但具有角度材料功能。

这是我现在所拥有的： 实际的步进器，内容显示在标题下方

这里有我想要 的步进器，其中内容位于页面中心，步骤标题位于侧面

我尝试过像这样编辑标题：

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

但它不起作用。

4

2 回答 2

1

我不确定这在步进器上是否同样有效，但我在标签上做了类似的事情。我使用服务在组件之间交换数据。如果您在同一个地方使用内容和标题，您可以尝试使用 2 个步进器。

1 用于标题，第二用于内容。您应该能够隐藏第二个选项卡的标题和第一个选项卡的内容。在第一个选项卡上，您可以使用 selectedIndex 绑定到打字稿中的变量。因此，一旦您更改变量，它将进入该步骤。要更改变量，您可以创建一个函数 selectionChange ，该函数将从 header-stepper 获取 step 事件并更改变量。从我看到的步进器类似于标签。所以这应该有效。希望这可以帮助。

标头步进器 (selectionChange)="selectionChange($event)"

内容步进 [(selectedIndex)]="selectedIndex"

于 2019-02-26T13:37:14.423 回答
0

这是我为此使用的一种方法，将每个步骤的内容投影到另一个组件中。这避免了使用服务、事件处理程序等。

就我而言，我想将当前步骤投影到步进器旁边的扩展面板中。此示例说明了如何使用面板操作行中的按钮来导航步进器，从而从步进器中填充它的各个部分：

  <mat-stepper #stepper orientation="vertical">
    <ng-template #expansionPanelHeader>
      <ng-container [ngTemplateOutlet]="stepper.selected?.stepLabel.template"></ng-container>                
    </ng-template>

    <ng-template #expansionPanelContent>
      <ng-container [ngTemplateOutlet]="stepper.selected?.content"></ng-container>
    </ng-template>

    <ng-template #expansionPanelActionRow>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </ng-template>

    <mat-step>
      <ng-template matStepLabel>Step 1</ng-template>
      <ng-template matStepContent>
        This is the content of step 1.
      </ng-template>
    </mat-step>

    <mat-step>
      <ng-template matStepLabel>Step 2</ng-template>
      <ng-template matStepContent>
        This is the content of step 2.
      </ng-template>
    </mat-step>
  </mat-stepper>

  <!-- The current step will be projected into this component -->
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <ng-container [ngTemplateOutlet]="expansionPanelHeader"></ng-container>
    </mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
      <ng-container [ngTemplateOutlet]="expansionPanelContent"></ng-container>
    </ng-template>

    <mat-action-row>
      <ng-container [ngTemplateOutlet]="expansionPanelActionRow"></ng-container>
    </mat-action-row>
  </mat-expansion-panel>

不幸的是，我能找到防止步进器内容也出现在步进器内部的唯一方法是这段 CSS：

.mat-vertical-content-container {
  display: none !important;
}

CSS 需要放置在全局.scss文件中，或者您需要使用ng-deep或其他类似的“解决方案”。我更喜欢前者，仅限于包含的元素。

于 2021-11-26T19:27:30.720 回答