Skip to content

refactor: update snippets/embedded example comments in material docs md to reflect new API (panel, stepper) #19680

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.

Sign up for GitHub

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 3 commits into from
Jun 19, 2020
Merged

refactor: update snippets/embedded example comments in material docs md to reflect new API (panel, stepper) #19680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
009ee77
expansion panel
annieyw Jun 17, 2020
66e56f4
stepper
annieyw Jun 17, 2020
a157932
add space in obj literal
annieyw Jun 19, 2020
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
5 changes: 4 additions & 1 deletion ...terial/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
<button mat-button (click)="accordion.openAll()">Expand All</button>
<button mat-button (click)="accordion.closeAll()">Collapse All</button>
</div>
<!-- #docregion multi -->
<mat-accordion class="example-headers-align" multi>
<!-- #enddocregion multi -->
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Expand All @@ -25,8 +27,9 @@
</mat-form-field>

</mat-expansion-panel>

<!-- #docregion disabled -->
<mat-expansion-panel disabled>
<!-- #enddocregion disabled -->
<mat-expansion-panel-header>
<mat-panel-title>
Destination
Expand Down
21 changes: 8 additions & 13 deletions ...components-examples/material/expansion/expansion-overview/expansion-overview-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,19 @@
<mat-accordion>
<mat-expansion-panel>
<!-- #docregion basic-panel -->
<!-- #docregion hide-toggle -->
<mat-expansion-panel hideToggle>
<!-- #enddocregion hide-toggle -->
<mat-expansion-panel-header>
<mat-panel-title>
Personal data
This is the expansion title
</mat-panel-title>
<mat-panel-description>
Type your name and age
This is a summary of the content
</mat-panel-description>
</mat-expansion-panel-header>

<mat-form-field>
<mat-label>First name</mat-label>
<input matInput>
</mat-form-field>

<mat-form-field>
<mat-label>Age</mat-label>
<input matInput type="number" min="1">
</mat-form-field>
<p>This is the primary content of the panel.</p>
</mat-expansion-panel>
<!-- #enddocregion basic-panel -->
<mat-expansion-panel (opened)="panelOpenState = true"
(closed)="panelOpenState = false">
<mat-expansion-panel-header>
Expand Down
3 changes: 2 additions & 1 deletion src/components-examples/material/expansion/expansion-steps/expansion-steps-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,11 @@
<mat-label>Age</mat-label>
<input matInput type="number" min="1">
</mat-form-field>

<!-- #docregion action-bar -->
<mat-action-row>
<button mat-button color="primary" (click)="nextStep()">Next</button>
</mat-action-row>
<!-- #enddocregion action-bar -->
</mat-expansion-panel>

<mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle>
Expand Down
4 changes: 4 additions & 0 deletions src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 4 additions & 0 deletions ...material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 6 additions & 0 deletions src/components-examples/material/stepper/stepper-states/stepper-states-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,16 @@
</mat-step>
</mat-horizontal-stepper>

<!-- #docregion states -->
<mat-horizontal-stepper>
<!-- #docregion label -->
<mat-step label="Step 1" state="phone">
<p>Put down your phones.</p>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<!-- #enddocregion label -->
<mat-step label="Step 2" state="chat">
<p>Socialize with each other.</p>
<div>
Expand All @@ -54,10 +57,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 -->
81 changes: 16 additions & 65 deletions src/material/expansion/expansion.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,100 +4,51 @@

### Expansion-panel content

Each expansion-panel must include a header and may optionally include an action bar.

#### Header

The `<mat-expansion-panel-header>` shows a summary of the panel content and acts
as the control for expanding and collapsing. This header may optionally contain an
`<mat-panel-title>` and an `<mat-panel-description>`, which format the content of the
header to align with Material Design specifications.

<!-- example({"example": "expansion-overview",
"file": "expansion-overview-example.html",
"region": "basic-panel"}) -->

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.

```html
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
This is the expansion title
</mat-panel-title>
<mat-panel-description>
This is a summary of the content
</mat-panel-description>
</mat-expansion-panel-header>

<p>This is the primary content of the panel.</p>

</mat-expansion-panel>
```
<!-- example({"example": "expansion-overview",
"file": "expansion-overview-example.html",
"region": "hide-toggle"}) -->

#### Action bar

Actions may optionally be included at the bottom of the panel, visible only when the expansion
is in its expanded state.

```html
<mat-expansion-panel>
<mat-expansion-panel-header>
This is the expansion title
</mat-expansion-panel-header>

<p>This is the primary content of the panel.</p>

<mat-action-row>
<button mat-button>Click me</button>
</mat-action-row>
</mat-expansion-panel>
```

<!-- example({"example": "expansion-steps",
"file": "expansion-steps-example.html",
"region": "action-bar"}) -->
#### Disabling a panel

Expansion panels can be disabled using the `disabled` attribute. A disabled expansion panel can't
be toggled by the user, but can still be manipulated programmatically.

```html
<mat-expansion-panel [disabled]="isDisabled">
<mat-expansion-panel-header>
This is the expansion title
</mat-expansion-panel-header>
<mat-panel-description>
This is a summary of the content
</mat-panel-description>
</mat-expansion-panel>
```

<!-- example({"example": "expansion-expand-collapse-all",
"file": "expansion-expand-collapse-all-example.html",
"region": "disabled"}) -->

### Accordion

Multiple expansion-panels can be combined into an accordion. The `multi="true"` input allows the
expansions state to be set independently of each other. When `multi="false"` (default) just one
panel can be expanded at a given time:

```html
<mat-accordion>

<mat-expansion-panel>
<mat-expansion-panel-header>
This is the expansion 1 title
</mat-expansion-panel-header>

This the expansion 1 content

</mat-expansion-panel>

<mat-expansion-panel>
<mat-expansion-panel-header>
This is the expansion 2 title
</mat-expansion-panel-header>

This the expansion 2 content

</mat-expansion-panel>

</mat-accordion>
```
<!-- example({"example": "expansion-expand-collapse-all",
"file": "expansion-expand-collapse-all-example.html",
"region": "multi"}) -->

### Lazy rendering
By default, the expansion panel content will be initialized even when the panel is closed.
Expand Down
Loading