Stepper alternative label

src/lib/stepper/stepper.md

@@ -40,6 +40,12 @@ For more complex labels, add a template with the `matStepLabel` directive inside
 </mat-vertical-stepper>
 ```
 
+#### Label position
+For `mat-horizontal-stepper` it's possible to define the position of the label. `end` is the default value, while `bottom` will place it under the step icon instead of at its side.
+This behaviour is controlled by `labelPosition` property.
+
+<!-- example(stepper-label-position-bottom) -->
+
 ### Stepper buttons
 There are two button directives to support navigation between different steps:
 `matStepperPrevious` and `matStepperNext`.

src/lib/stepper/stepper.scss

@@ -2,6 +2,7 @@
 
 $mat-horizontal-stepper-header-height: 72px !default;
 $mat-stepper-label-header-height: 24px !default;
+$mat-stepper-label-position-bottom-top-gap: 16px !default;
 $mat-stepper-side-gap: 24px !default;
 $mat-vertical-stepper-content-margin: 36px !default;
 $mat-stepper-line-width: 1px !default;
@@ -16,6 +17,10 @@ $mat-stepper-line-gap: 8px !default;
   white-space: nowrap;
   display: flex;
   align-items: center;
+
+  .mat-stepper-label-position-bottom & {
+    align-items: flex-start;
+  }
 }
 
 .mat-stepper-horizontal-line {
@@ -25,6 +30,25 @@ $mat-stepper-line-gap: 8px !default;
   height: 0;
   margin: 0 $mat-stepper-line-gap - $mat-stepper-side-gap;
   min-width: $mat-stepper-line-gap + $mat-stepper-side-gap;
+
+  .mat-stepper-label-position-bottom & {
+    margin: 0;
+    min-width: 0;
+    position: relative;
+    top: $mat-stepper-side-gap + $mat-stepper-label-header-height / 2;
+  }
+}
+
+%mat-header-horizontal-line-label-position-bottom {
+  border-top-color: rgba(0, 0, 0, 0.12);
+  border-top-width: $mat-stepper-line-width;
+  border-top-style: solid;
+  content: '';
+  display: inline-block;
+  height: 0;
+  position: absolute;
+  top: $mat-stepper-side-gap + $mat-stepper-label-header-height / 2;
+  width: calc(50% - #{$mat-stepper-label-header-height / 2 + $mat-stepper-line-gap});
 }
 
 .mat-horizontal-stepper-header {
@@ -43,6 +67,40 @@ $mat-stepper-line-gap: 8px !default;
       margin-left: $mat-stepper-line-gap;
     }
   }
+
+  .mat-stepper-label-position-bottom & {
+    box-sizing: border-box;
+    flex-direction: column;
+    // We use auto instead of fixed 104px (by spec) because when there is an optional step
+    //  the height is greater than that
+    height: auto;
+    padding: $mat-stepper-side-gap;
+
+    [dir='ltr'] &:not(:last-child)::after,
+    [dir='rtl'] &:not(:first-child)::after {
+      @extend %mat-header-horizontal-line-label-position-bottom;
+      right: 0;
+    }
+
+    [dir='ltr'] &:not(:first-child)::before,
+    [dir='rtl'] &:not(:last-child)::before {
+      @extend %mat-header-horizontal-line-label-position-bottom;
+      left: 0;
+    }
+
+    & .mat-step-icon,
+    & .mat-step-icon-not-touched {
+      // Cleans margin both for ltr and rtl direction
+      margin-right: 0;
+      margin-left: 0;
+    }
+
+    & .mat-step-label {
+      padding: $mat-stepper-label-position-bottom-top-gap 0 0 0;
+      text-align: center;
+      width: 100%;
+    }
+  }
 }
 
 .mat-vertical-stepper-header {

src/lib/stepper/stepper.ts

@@ -27,6 +27,7 @@ import {
   EventEmitter,
   forwardRef,
   Inject,
+  Input,
   Optional,
   Output,
   QueryList,
@@ -38,9 +39,10 @@ import {
 import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
 import {DOCUMENT} from '@angular/common';
 import {ErrorStateMatcher} from '@angular/material/core';
+import {takeUntil} from 'rxjs/operators';
+
 import {MatStepHeader} from './step-header';
 import {MatStepLabel} from './step-label';
-import {takeUntil} from 'rxjs/operators';
 import {matStepperAnimations} from './stepper-animations';
 import {MatStepperIcon, MatStepperIconContext} from './stepper-icon';
 
@@ -124,6 +126,8 @@ export class MatStepper extends _CdkStepper implements AfterContentInit {
   inputs: ['selectedIndex'],
   host: {
     'class': 'mat-stepper-horizontal',
+    '[class.mat-stepper-label-position-end]': 'labelPosition == "end"',
+    '[class.mat-stepper-label-position-bottom]': 'labelPosition == "bottom"',
     'aria-orientation': 'horizontal',
     'role': 'tablist',
   },
@@ -132,7 +136,11 @@ export class MatStepper extends _CdkStepper implements AfterContentInit {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatHorizontalStepper extends MatStepper { }
+export class MatHorizontalStepper extends MatStepper {
+  /** Whether the label should display in bottom or end position. */
+  @Input()
+  labelPosition: 'bottom' | 'end' = 'end';
+}
 
 @Component({
   moduleId: module.id,

src/material-examples/stepper-label-position-bottom/stepper-label-position-bottom-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/material-examples/stepper-label-position-bottom/stepper-label-position-bottom-example.html

@@ -0,0 +1,33 @@
+<mat-horizontal-stepper labelPosition="bottom" #stepper>
+    <mat-step [stepControl]="firstFormGroup">
+        <form [formGroup]="firstFormGroup">
+            <ng-template matStepLabel>Fill out your name</ng-template>
+            <mat-form-field>
+                <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
+            </mat-form-field>
+            <div>
+                <button mat-button matStepperNext>Next</button>
+            </div>
+        </form>
+    </mat-step>
+    <mat-step [stepControl]="secondFormGroup" optional>
+        <form [formGroup]="secondFormGroup">
+            <ng-template matStepLabel>Fill out your address</ng-template>
+            <mat-form-field>
+                <input matInput placeholder="Address" formControlName="secondCtrl" required>
+            </mat-form-field>
+            <div>
+                <button mat-button matStepperPrevious>Back</button>
+                <button mat-button matStepperNext>Next</button>
+            </div>
+        </form>
+    </mat-step>
+    <mat-step>
+        <ng-template matStepLabel>Done</ng-template>
+        You are now done.
+        <div>
+            <button mat-button matStepperPrevious>Back</button>
+            <button mat-button (click)="stepper.reset()">Reset</button>
+        </div>
+    </mat-step>
+</mat-horizontal-stepper>

src/material-examples/stepper-label-position-bottom/stepper-label-position-bottom-example.ts

@@ -0,0 +1,26 @@
+import {Component, OnInit} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+
+/**
+ * @title Stepper label bottom position
+ */
+@Component({
+  selector: 'stepper-label-position-bottom-example',
+  templateUrl: 'stepper-label-position-bottom-example.html',
+  styleUrls: ['stepper-label-position-bottom-example.css'],
+})
+export class StepperLabelPositionBottomExample implements OnInit {
+  firstFormGroup: FormGroup;
+  secondFormGroup: FormGroup;
+
+  constructor(private _formBuilder: FormBuilder) {}
+
+  ngOnInit() {
+    this.firstFormGroup = this._formBuilder.group({
+      firstCtrl: ['', Validators.required]
+    });
+    this.secondFormGroup = this._formBuilder.group({
+      secondCtrl: ['', Validators.required]
+    });
+  }
+}