39 lines
2.3 KiB
HTML
39 lines
2.3 KiB
HTML
|
<div class="md-stepper" ng-class="{ 'md-active': $ctrl.isActive() }">
|
||
|
|
<md-steppers-header class="md-steppers-header md-steppers-vertical">
|
||
|
|
<md-button class="md-stepper-indicator" ng-class="{
|
||
|
|
'md-active': $ctrl.stepNumber === $ctrl.$stepper.currentStep,
|
||
|
|
'md-completed': $ctrl.$stepper.isCompleted($ctrl.stepNumber),
|
||
|
|
'md-error': $ctrl.hasError,
|
||
|
|
'md-stepper-optional': $ctrl.optional || $ctrl.hasError
|
||
|
|
}" ng-click="$ctrl.$stepper.goto($ctrl.stepNumber)"
|
||
|
|
ng-disabled="$ctrl.$stepper.linear || $ctrl.stepNumber === $ctrl.$stepper.currentStep"
|
||
|
|
aria-label="{{ $ctrl.label }}">
|
||
|
|
<div class="md-stepper-indicator-wrapper">
|
||
|
|
<md-button class="md-fab md-primary md-stepper-numbers" md-no-ink
|
||
|
|
ng-disabled="!$ctrl.$stepper.isCompleted($ctrl.stepNumber) && $ctrl.stepNumber !== $ctrl.$stepper.currentStep"
|
||
|
|
ng-hide="$ctrl.$step.hasError"
|
||
|
|
aria-label="{{ ::$ctrl.stepNumber+1 }}">
|
||
|
|
<span ng-if="!$ctrl.$stepper.isCompleted($ctrl.stepNumber)">{{ ::$ctrl.stepNumber+1 }}</span>
|
||
|
|
<md-icon md-svg-icon="steppers-check" class="md-stepper-icon md-warn"
|
||
|
|
ng-if="$ctrl.$stepper.isCompleted($ctrl.stepNumber)"></md-icon>
|
||
|
|
</md-button>
|
||
|
|
<div class="md-stepper-error-indicator md-warn" ng-show="$ctrl.hasError">
|
||
|
|
<md-icon md-svg-icon="steppers-warning"></md-icon>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="md-stepper-title">
|
||
|
|
<span>{{ $ctrl.label }}</span>
|
||
|
|
<small ng-if="$ctrl.optional && !$ctrl.hasError">{{ $ctrl.optional }}</small>
|
||
|
|
<small class="md-stepper-error-message" ng-show="$ctrl.hasError">
|
||
|
|
{{ $ctrl.message }}
|
||
|
|
</small>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</md-button>
|
||
|
|
<div class="md-stepper-feedback-message" ng-show="stepper.hasFeedback">
|
||
|
|
{{stepper.feedbackMessage}}
|
||
|
|
</div>
|
||
|
|
</md-steppers-header>
|
||
|
|
<md-steppers-scope layout="column" class="md-steppers-scope" ng-if="$ctrl.isActive()"
|
||
|
|
ng-transclude></md-steppers-scope>
|
||
|
|
</div>
|