@@ -19,30 +19,30 @@ placed inside either one of the two stepper components.
19
19
### Labels
20
20
If a step's label is only text, then the ` label ` attribute can be used.
21
21
<!-- example({"example": "stepper-overview",
22
- "file": "stepper-overview-example.html",
22
+ "file": "stepper-overview-example.html",
23
23
"region": "label"}) -->
24
24
25
25
For more complex labels, add a template with the ` matStepLabel ` directive inside the
26
26
` mat-step ` .
27
27
<!-- example({"example": "stepper-editable",
28
- "file": "stepper-editable-example.html",
29
- "region": "ng-template "}) -->
28
+ "file": "stepper-editable-example.html",
29
+ "region": "step-label "}) -->
30
30
31
31
#### Label position
32
32
For ` mat-horizontal-stepper ` it's possible to define the position of the label. ` end ` is the
33
33
default value, while ` bottom ` will place it under the step icon instead of at its side.
34
34
This behaviour is controlled by ` labelPosition ` property.
35
35
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",
38
38
"region": "label-position"}) -->
39
39
40
40
### Stepper buttons
41
41
There are two button directives to support navigation between different steps:
42
42
` 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 "}) -->
46
46
47
47
### Linear stepper
48
48
The ` 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
105
105
on ` mat-step ` .
106
106
107
107
<!-- example({"example": "stepper-optional",
108
- "file": "stepper-optional-example.html",
108
+ "file": "stepper-optional-example.html",
109
109
"region": "optional"}) -->
110
110
111
111
@@ -114,7 +114,7 @@ By default, steps are editable, which means users can return to previously compl
114
114
edit their responses. ` editable="false" ` can be set on ` mat-step ` to change the default.
115
115
116
116
<!-- example({"example": "stepper-editable",
117
- "file": "stepper-editable-example.html",
117
+ "file": "stepper-editable-example.html",
118
118
"region": "editable"}) -->
119
119
120
120
#### Completed step
@@ -129,7 +129,7 @@ by placing a `matStepperIcon` for each of the icons that you want to override. T
129
129
` active ` , and ` optional ` values of the individual steps are available through template variables:
130
130
131
131
<!-- example({"example": "stepper-states",
132
- "file": "stepper-states-example.html",
132
+ "file": "stepper-states-example.html",
133
133
"region": "override-icons"}) -->
134
134
135
135
Note 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
139
139
However, it can be overridden the same way as mentioned above.
140
140
141
141
<!-- example({"example": "stepper-states",
142
- "file": "stepper-states-example.html",
142
+ "file": "stepper-states-example.html",
143
143
"region": "states"}) -->
144
144
145
145
In order to use the custom step states, you must add the ` displayDefaultIndicatorType ` option to
0 commit comments