Skip to content

docs(stepper): correct file name in markdown #20288

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 13, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@
<mat-step [stepControl]="firstFormGroup" [editable]="isEditable">
<!-- #enddocregion editable -->
<form [formGroup]="firstFormGroup">
<!-- #docregion ng-template -->
<!-- #docregion step-label -->
<ng-template matStepLabel>Fill out your name</ng-template>
<!-- #enddocregion ng-template -->
<!-- #enddocregion step-label -->
<mat-form-field>
<mat-label>Name</mat-label>
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@
required>
</mat-form-field>
<div>
<!-- #docregion mat-stepper -->
<!-- #docregion buttons -->
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
<!-- #enddocregion mat-stepper -->
<!-- #enddocregion buttons -->
</div>
</form>
</mat-step>
Expand Down
24 changes: 12 additions & 12 deletions src/material/stepper/stepper.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,30 +19,30 @@ 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.
<!-- example({"example": "stepper-overview",
"file": "stepper-overview-example.html",
"file": "stepper-overview-example.html",
"region": "label"}) -->

For more complex labels, add a template with the `matStepLabel` directive inside the
`mat-step`.
<!-- example({"example": "stepper-editable",
"file": "stepper-editable-example.html",
"region": "ng-template"}) -->
"file": "stepper-editable-example.html",
"region": "step-label"}) -->

#### 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({"example": "stepper-label-position",
"file": "stepper-label-position-example.html",
<!-- example({"example": "stepper-label-position-bottom",
"file": "stepper-label-position-bottom-example.html",
"region": "label-position"}) -->

### Stepper buttons
There are two button directives to support navigation between different steps:
`matStepperPrevious` and `matStepperNext`.
<!-- example({"example": "stepper-label-position",
"file": "stepper-label-position-example.html",
"region": "mat-stepper"}) -->
<!-- example({"example": "stepper-label-position-bottom",
"file": "stepper-label-position-bottom-example.html",
"region": "buttons"}) -->

### Linear stepper
The `linear` attribute can be set on `mat-horizontal-stepper` and `mat-vertical-stepper` to create
Expand Down Expand Up @@ -105,7 +105,7 @@ If completion of a step in linear stepper is not required, then the `optional` a
on `mat-step`.

<!-- example({"example": "stepper-optional",
"file": "stepper-optional-example.html",
"file": "stepper-optional-example.html",
"region": "optional"}) -->


Expand All @@ -114,7 +114,7 @@ By default, steps are editable, which means users can return to previously compl
edit their responses. `editable="false"` can be set on `mat-step` to change the default.

<!-- example({"example": "stepper-editable",
"file": "stepper-editable-example.html",
"file": "stepper-editable-example.html",
"region": "editable"}) -->

#### Completed step
Expand All @@ -129,7 +129,7 @@ by placing a `matStepperIcon` for each of the icons that you want to override. T
`active`, and `optional` values of the individual steps are available through template variables:

<!-- example({"example": "stepper-states",
"file": "stepper-states-example.html",
"file": "stepper-states-example.html",
"region": "override-icons"}) -->

Note that you aren't limited to using the `mat-icon` component when providing custom icons.
Expand All @@ -139,7 +139,7 @@ You can set the state of a step to whatever you want. The given state by default
However, it can be overridden the same way as mentioned above.

<!-- example({"example": "stepper-states",
"file": "stepper-states-example.html",
"file": "stepper-states-example.html",
"region": "states"}) -->

In order to use the custom step states, you must add the `displayDefaultIndicatorType` option to
Expand Down