material2/src/lib/stepper/stepper-horizontal.html at 7bb7a5400a11550dbe48bcb498419db797f3ffaa · g1shin/material2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="mat-horizontal-stepper-header-container">
  <ng-container *ngFor="let step of _steps; let i = index; let isLast = last">
    <div #stepHeader class="mat-horizontal-stepper-header"
         role="tab"
         [id]="_getStepLabelId(i)"
         [attr.aria-controls]="_getStepContentId(i)"
         [attr.aria-selected]="selectedIndex == i"
         [tabIndex]="_focusIndex == i ? 0 : -1"
         (click)="step.select()"
         (keydown)="_onKeydown($event)">
      <div class="mat-stepper-index">
        {{i + 1}}
      </div>

      <div class="mat-stepper-label">
        <!-- If there is a label template, use it. -->
        <ng-container *ngIf="step.stepLabel" [ngTemplateOutlet]="step.stepLabel.template">
        </ng-container>
        <!-- It there is no label template, fall back to the text label. -->
        <div *ngIf="!step.stepLabel">{{step.label}}</div>
      </div>
    </div>

    <div *ngIf="!isLast" class="connector-line"></div>
  </ng-container>
</div>

<div *ngFor="let step of _steps; let i = index"
     class="mat-horizontal-stepper-content" role="tabpanel"
     [id]="_getStepContentId(i)"
     [attr.aria-labelledby]="_getStepLabelId(i)"
     [attr.aria-expanded]="selectedIndex == i">
  <ng-container [ngTemplateOutlet]="step.content"></ng-container>
</div>