У тела всех шагов коврика горизонтальный шаговый за пределами бирки коврик горизонтальный шаговый - PullRequest
Новая
       9

У тела всех шагов коврика горизонтальный шаговый за пределами бирки коврик горизонтальный шаговый

0 голосов
/ 27 января 2020

Я хочу использовать это: https://material.angular.io/components/stepper/overview

, но для целей макета (который может быть динамическим c), где я могу иметь или не иметь элементы между кликабельный заголовок шага и его содержимое. Я хочу, чтобы содержимое степпера (все, что находится под круглым значком и меткой шага) находилось вне тега DOM </mat-horizontal-stepper>.

Некоторые другие Компоненты делают это sh, называя определенную переменную в теге шага именем шаблона, объявив его так, позже в DOM.

Однако, если я сделаю это: 

  <div>
    <mat-horizontal-stepper labelPosition="bottom" #stepper class="width">
      <mat-step>
        <ng-template matStepLabel>Prerequisite Check</ng-template>
        <div [ngTemplateOutlet]="first_step"></div>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Check Account Readiness</ng-template>
        <div [ngTemplateOutlet]="second_step"></div>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Open</ng-template>
        <div [ngTemplateOutlet]="third_step"></div>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Migration</ng-template>
        <div [ngTemplateOutlet]="fourth_step"></div>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Deletion Now</ng-template>
        <div [ngTemplateOutlet]="fith_step"></div>
      </mat-step>
    </mat-horizontal-stepper>
  </div>

  <div class="card shadow margin-top controlled-height">
    <ng-template #first_step>
      <div>first_step</div>
    </ng-template>
    <ng-template #second_step>
      <div>second_step</div>
    </ng-template>
    <ng-template #third_step>
      <div>third_step</div>
    </ng-template>
    <ng-template #fourth_step>
      <div>fourth_step</div>
    </ng-template>
    <ng-template #fith_step>
      <div>fith_step</div>
    </ng-template>
  </div>

Содержимое отображается, но внутри первого элемента div, содержащего степпер, а не карту.

моя вторая попытка прошла следующим образом (я перевернул вызывающего и вызываемого): 

  <div>
    <mat-horizontal-stepper labelPosition="bottom" #stepper class="width">
      <mat-step>
        <ng-template matStepLabel>Prerequisite Check</ng-template>
        <ng-template #first_step>
          <div>first_step</div>
        </ng-template>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Check Account Readiness</ng-template>
        <ng-template #second_step>
          <div>second_step</div>
        </ng-template>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Open</ng-template>
        <ng-template #third_step>
          <div>third_step</div>
        </ng-template>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Migration</ng-template>
        <ng-template #fourth_step>
          <div>fourth_step</div>
        </ng-template>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Deletion Now</ng-template>
        <ng-template #fith_step>
          <div>fith_step</div>
        </ng-template>
      </mat-step>
    </mat-horizontal-stepper>
  </div>

  <div class="card shadow margin-top controlled-height">
    <div [ngTemplateOutlet]="first_step"></div>
    <div [ngTemplateOutlet]="second_step"></div>
    <div [ngTemplateOutlet]="third_step"></div>
    <div [ngTemplateOutlet]="fourth_step"></div>
    <div [ngTemplateOutlet]="fith_step"></div>
  </div>

на этот раз содержимое показывалось там, где я его предназначал, но все было видно одновременно.

Возможно ли разделение заголовка и содержимого в matstepper для материала степпера?

Подводя итог : Я бы хотел содержимое внутри <mat-step> за пределами </mat-horizontal-stepper> (кроме matStepLabel, мне все равно, где это должно go).

1 Ответ

0 голосов
/ 29 января 2020

Я пришел к выводу, что использование мат-степпера не стоило усилий.

Я реконструировал степпер с нуля, это было легко. не было никаких дополнительных функций, которые мне действительно не хватает.

теперь у меня есть функциональность, которую я хочу. (разделенное тело и кликабельный заголовок)

...