@@ -19,30 +19,30 @@ placed inside either one of the two stepper components.
1919### Labels
2020If a step's label is only text, then the ` label ` attribute can be used.
2121<!-- example({"example": "stepper-overview",
22- "file": "stepper-overview-example.html",
22+ "file": "stepper-overview-example.html",
2323 "region": "label"}) -->
2424
2525For more complex labels, add a template with the ` matStepLabel ` directive inside the
2626` mat-step ` .
2727<!-- example({"example": "stepper-editable",
28- "file": "stepper-editable-example.html",
29- "region": "ng-template "}) -->
28+ "file": "stepper-editable-example.html",
29+ "region": "step-label "}) -->
3030
3131#### Label position
3232For ` mat-horizontal-stepper ` it's possible to define the position of the label. ` end ` is the
3333default value, while ` bottom ` will place it under the step icon instead of at its side.
3434This behaviour is controlled by ` labelPosition ` property.
3535
36- <!-- example({"example": "stepper-label-position",
37- "file": "stepper-label-position-example.html",
36+ <!-- example({"example": "stepper-label-position-bottom ",
37+ "file": "stepper-label-position-bottom- example.html",
3838 "region": "label-position"}) -->
3939
4040### Stepper buttons
4141There are two button directives to support navigation between different steps:
4242` matStepperPrevious ` and ` matStepperNext ` .
43- <!-- example({"example": "stepper-label-position",
44- "file": "stepper-label-position-example.html",
45- "region": "mat-stepper "}) -->
43+ <!-- example({"example": "stepper-label-position-bottom ",
44+ "file": "stepper-label-position-bottom- example.html",
45+ "region": "buttons "}) -->
4646
4747### Linear stepper
4848The ` linear ` attribute can be set on ` mat-horizontal-stepper ` and ` mat-vertical-stepper ` to create
@@ -105,7 +105,7 @@ If completion of a step in linear stepper is not required, then the `optional` a
105105on ` mat-step ` .
106106
107107<!-- example({"example": "stepper-optional",
108- "file": "stepper-optional-example.html",
108+ "file": "stepper-optional-example.html",
109109 "region": "optional"}) -->
110110
111111
@@ -114,7 +114,7 @@ By default, steps are editable, which means users can return to previously compl
114114edit their responses. ` editable="false" ` can be set on ` mat-step ` to change the default.
115115
116116<!-- example({"example": "stepper-editable",
117- "file": "stepper-editable-example.html",
117+ "file": "stepper-editable-example.html",
118118 "region": "editable"}) -->
119119
120120#### Completed step
@@ -129,7 +129,7 @@ by placing a `matStepperIcon` for each of the icons that you want to override. T
129129` active ` , and ` optional ` values of the individual steps are available through template variables:
130130
131131<!-- example({"example": "stepper-states",
132- "file": "stepper-states-example.html",
132+ "file": "stepper-states-example.html",
133133 "region": "override-icons"}) -->
134134
135135Note that you aren't limited to using the ` mat-icon ` component when providing custom icons.
@@ -139,7 +139,7 @@ You can set the state of a step to whatever you want. The given state by default
139139However, it can be overridden the same way as mentioned above.
140140
141141<!-- example({"example": "stepper-states",
142- "file": "stepper-states-example.html",
142+ "file": "stepper-states-example.html",
143143 "region": "states"}) -->
144144
145145In order to use the custom step states, you must add the ` displayDefaultIndicatorType ` option to
0 commit comments