stepper

Author: annieyw

src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html

@@ -3,9 +3,13 @@
 </button>
 
 <mat-horizontal-stepper linear #stepper>
+<!-- #docregion editable -->
   <mat-step [stepControl]="firstFormGroup" [editable]="isEditable">
+<!-- #enddocregion editable -->
     <form [formGroup]="firstFormGroup">
+<!-- #edocregion ng-template -->
       <ng-template matStepLabel>Fill out your name</ng-template>
+<!-- #enddocregion ng-template -->
       <mat-form-field>
         <mat-label>Name</mat-label>
         <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>

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

@@ -1,4 +1,6 @@
+<!-- #docregion label-position -->
 <mat-horizontal-stepper labelPosition="bottom" #stepper>
+<!-- #enddocregion label-position -->
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
@@ -20,8 +22,10 @@
                required>
       </mat-form-field>
       <div>
+<!-- #docregion mat-stepper -->
         <button mat-button matStepperPrevious>Back</button>
         <button mat-button matStepperNext>Next</button>
+<!-- #enddocregion mat-stepper -->
       </div>
     </form>
   </mat-step>

src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html

@@ -15,7 +15,9 @@
       </div>
     </form>
   </mat-step>
+  <!-- #docregion optional -->
   <mat-step [stepControl]="secondFormGroup" [optional]="isOptional">
+  <!-- #enddocregion optional -->
     <form [formGroup]="secondFormGroup">
       <ng-template matStepLabel>Fill out your address</ng-template>
       <mat-form-field>

src/components-examples/material/stepper/stepper-overview/stepper-overview-example.html

@@ -2,6 +2,11 @@
   {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
 </button>
 <mat-horizontal-stepper [linear]="isLinear" #stepper>
+  <!-- #docreion label -->
+  <mat-step label="Welcome">
+    Please continue.
+  </mat-step>
+  <!-- #enddocregion label -->
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>

src/components-examples/material/stepper/stepper-states/stepper-states-example.html

@@ -35,6 +35,7 @@
   </mat-step>
 </mat-horizontal-stepper>
 
+<!-- #docregion states -->
 <mat-horizontal-stepper>
   <mat-step label="Step 1" state="phone">
     <p>Put down your phones.</p>
@@ -54,10 +55,13 @@
   </mat-step>
 
   <!-- Icon overrides. -->
+<!-- #docregion override-icons -->
   <ng-template matStepperIcon="phone">
     <mat-icon>call_end</mat-icon>
   </ng-template>
   <ng-template matStepperIcon="chat">
     <mat-icon>forum</mat-icon>
   </ng-template>
 </mat-horizontal-stepper>
+<!-- #enddocregion override-icons -->
+<!-- #enddocregion states -->

src/material/expansion/expansion.md

@@ -17,7 +17,7 @@ header to align with Material Design specifications.
               
 By default, the expansion-panel header includes a toggle icon at the end of the
 header to indicate the expansion state. This icon can be hidden via the
-`hideToggle` property.     
+`hideToggle` property.
 
 <!-- example({"example":"expansion-overview",
               "file":"expansion-overview-example.html", 

src/material/stepper/stepper.md

@@ -1,7 +1,5 @@
 Angular Material's stepper provides a wizard-like workflow by dividing content into logical steps.
 
-<!-- example(stepper-overview) -->
-
 Material stepper builds on the foundation of the CDK stepper that is responsible for the logic
 that drives a stepped workflow. Material stepper extends the CDK stepper and has Material Design
 styling.
@@ -10,6 +8,8 @@ styling.
 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-overview) -->
+
 <!-- example(stepper-vertical) -->
 
 `mat-horizontal-stepper` selector can be used to create a horizontal stepper, and
@@ -18,49 +18,31 @@ placed inside either one of the two stepper components.
 
 ### Labels
 If a step's label is only text, then the `label` attribute can be used.
-```html
-<mat-vertical-stepper>
-  <mat-step label="Step 1">
-    Content 1
-  </mat-step>
-  <mat-step label="Step 1">
-    Content 2
-  </mat-step>
-</mat-vertical-stepper>
-```
+<!-- example({"example":"stepper-overview",
+              "file":"stepper-overview-example.html", 
+              "region":"label"}) -->
 
 For more complex labels, add a template with the `matStepLabel` directive inside the
 `mat-step`.
-```html
-<mat-vertical-stepper>
-  <mat-step>
-    <ng-template matStepLabel>...</ng-template>
-    ...
-  </mat-step>
-</mat-vertical-stepper>
-```
+<!-- example({"example":"stepper-editable",
+              "file":"stepper-editable-example.html", 
+              "region":"ng-template"}) -->
 
 #### 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) -->
+<!-- example({"example":"stepper-label-position",
+              "file":"stepper-label-position-example.html", 
+              "region":"label-position"}) -->
 
 ### Stepper buttons
 There are two button directives to support navigation between different steps:
 `matStepperPrevious` and `matStepperNext`.
-```html
-<mat-horizontal-stepper>
-  <mat-step>
-    ...
-    <div>
-      <button mat-button matStepperPrevious>Back</button>
-      <button mat-button matStepperNext>Next</button>
-    </div>
-  </mat-step>
-</mat-horizontal-stepper>
-```
+<!-- example({"example":"stepper-label-position",
+              "file":"stepper-label-position-example.html", 
+              "region":"mat-stepper"}) -->
 
 ### Linear stepper
 The `linear` attribute can be set on `mat-horizontal-stepper` and `mat-vertical-stepper` to create
@@ -122,14 +104,18 @@ are completed.
 If completion of a step in linear stepper is not required, then the `optional` attribute can be set
 on `mat-step`.
 
-<!-- example(stepper-optional) -->
+<!-- example({"example":"stepper-optional",
+              "file":"stepper-optional-example.html", 
+              "region":"optional"}) -->
 
 
 #### Editable step
 By default, steps are editable, which means users can return to previously completed steps and
 edit their responses. `editable="false"` can be set on `mat-step` to change the default.
 
-<!-- example(stepper-editable) -->
+<!-- example({"example":"stepper-editable",
+              "file":"stepper-editable-example.html", 
+              "region":"editable"}) -->
 
 #### Completed step
 By default, the `completed` attribute of a step returns `true` if the step is valid (in case of
@@ -142,59 +128,19 @@ set via `<mat-icon>` elements. If you want to provide a different set of icons,
 by placing a `matStepperIcon` for each of the icons that you want to override. The `index`,
 `active`, and `optional` values of the individual steps are available through template variables:
 
-```html
-<mat-vertical-stepper>
-  <ng-template matStepperIcon="edit">
-    <mat-icon>insert_drive_file</mat-icon>
-  </ng-template>
-
-  <ng-template matStepperIcon="done">
-    <mat-icon>done_all</mat-icon>
-  </ng-template>
-
-  <!-- Custom icon with a context variable. -->
-  <ng-template matStepperIcon="number" let-index="index">
-    {{index + 10}}
-  </ng-template>
-
-  <!-- Stepper steps go here -->
-</mat-vertical-stepper>
-```
+<!-- example({"example":"stepper-states",
+              "file":"stepper-states-example.html", 
+              "region":"override-icons"}) -->
 
 Note that you aren't limited to using the `mat-icon` component when providing custom icons.
 
 #### Step States
 You can set the state of a step to whatever you want. The given state by default maps to an icon.
 However, it can be overridden the same way as mentioned above.
 
-```html
-<mat-horizontal-stepper>
-  <mat-step label="Step 1" state="phone">
-    <p>Put down your phones.</p>
-    <div>
-      <button mat-button matStepperNext>Next</button>
-    </div>
-  </mat-step>
-  <mat-step label="Step 2" state="chat">
-    <p>Socialize with each other.</p>
-    <div>
-      <button mat-button matStepperPrevious>Back</button>
-      <button mat-button matStepperNext>Next</button>
-    </div>
-  </mat-step>
-  <mat-step label="Step 3">
-    <p>You're welcome.</p>
-  </mat-step>
-
-  <!-- Icon overrides. -->
-  <ng-template matStepperIcon="phone">
-    <mat-icon>call_end</mat-icon>
-  </ng-template>
-  <ng-template matStepperIcon="chat">
-    <mat-icon>forum</mat-icon>
-  </ng-template>
-</mat-horizontal-stepper>
-```
+<!-- example({"example":"stepper-states",
+              "file":"stepper-states-example.html", 
+              "region":"states"}) -->
 
 In order to use the custom step states, you must add the `displayDefaultIndicatorType` option to
 the global default stepper options which can be specified by providing a value for