update(stepper): Adds Vertical Stepper example (#10942)

This adds the vertical stepper example to documentation

Author: raygervais

src/lib/stepper/stepper.md

@@ -9,6 +9,9 @@ styling.
 ### Stepper variants
 There are two stepper components: `mat-horizontal-stepper` and `mat-vertical-stepper`. They
 can be used the same way. The only difference is the orientation of stepper.
+
+<!-- example(stepper-vertical) -->
+
 `mat-horizontal-stepper` selector can be used to create a horizontal stepper, and
 `mat-vertical-stepper` can be used to create a vertical stepper. `mat-step` components need to be
 placed inside either one of the two stepper components.

src/material-examples/stepper-vertical/stepper-vertical-example.css

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

src/material-examples/stepper-vertical/stepper-vertical-example.html

@@ -0,0 +1,36 @@
+<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
+  {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
+</button>
+<mat-vertical-stepper [linear]="isLinear" #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">
+    <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-vertical-stepper>

src/material-examples/stepper-vertical/stepper-vertical-example.ts

@@ -0,0 +1,27 @@
+import {Component} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+
+/**
+ * @title Stepper vertical
+ */
+@Component({
+  selector: 'stepper-vertical',
+  templateUrl: 'stepper-vertical-example.html',
+  styleUrls: ['stepper-vertical-example.css']
+})
+export class StepperVerticalExample {
+  isLinear = false;
+  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]
+    });
+  }
+}