Skip to content

Commit 63411dc

Browse files
julianobrasilandrewseguin
julianobrasil
authored and
andrewseguin
committed
docs(expansion): create overview and examples (#5823)
* docs(expansion): create overview and examples * ommit 'public' keyword * change doc structure * review 2 * eliminate md-accordion mentioned in expansion panel content * will's reviews * break lines at 100 chars * typo * toggleHide => hideToggle in overview * Rafael's review (travis and prefix css class) * Rafael's review (prefix header-align css class) * new line for expansion-overview-example.css * overview jelbourn's reviews * expansion-steps-example (will's reviews) * new line in steps example * delete paragraph in header * expansion panel => expansion-panel * add styleUrls in steps example @component decorator * update steps example @component decorator
1 parent fee0c6d commit 63411dc

File tree

7 files changed

+212
-0
lines changed

7 files changed

+212
-0
lines changed

‎src/lib/expansion/expansion.md

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
`<md-expansion-panel>` provides an expandable details-summary view.
2+
3+
<!-- example(expansion-overview) -->
4+
5+
### Expansion-panel content
6+
7+
Each expansion-panel must include a header and may optionally include an action bar.
8+
9+
#### Header
10+
11+
The `<md-expansion-panel-header>` shows a summary of the panel content and acts
12+
as the control for expanding and collapsing. This header may optionally contain an
13+
`<md-panel-title>` and an `<md-panel-description>`, which format the content of the
14+
header to align with Material Design specifications.
15+
16+
By default, the expansion-panel header includes a toggle icon at the end of the
17+
header to indicate the expansion state. This icon can be hidden via the
18+
`hideToggle` property.
19+
20+
```html
21+
<md-expansion-panel>
22+
<md-expansion-panel-header>
23+
<md-panel-title>
24+
This is the expansion title
25+
</md-panel-title>
26+
<md-panel-description>
27+
This is a summary of the content
28+
</md-panel-description>
29+
</md-expansion-panel-header>
30+
31+
<p>This is the primary content of the panel.</p>
32+
33+
</md-expansion-panel>
34+
```
35+
36+
#### Action bar
37+
38+
Actions may optionally be included at the bottom of the panel, visible only when the expansion is in its
39+
expanded state.
40+
41+
```html
42+
<md-expansion-panel>
43+
<md-expansion-panel-header>
44+
This is the expansion title
45+
</md-expansion-panel-header>
46+
47+
<p>This is the primary content of the panel.</p>
48+
49+
<md-action-row>
50+
<button md-button>Click me</button>
51+
</md-action-row>
52+
</md-expansion-panel>
53+
```
54+
55+
### Accordion
56+
57+
Multiple expansion-panels can be combined into an accordion. The `multi="true"` input allows the
58+
expansions state to be set independently of each other. When `multi="false"` (default) just one
59+
panel can be expanded at a given time:
60+
61+
```html
62+
<md-accordion>
63+
64+
<md-expansion-panel>
65+
<md-expansion-panel-header>
66+
This is the expansion 1 title
67+
</md-expansion-panel-header>
68+
69+
This the expansion 1 content
70+
71+
</md-expansion-panel>
72+
73+
<md-expansion-panel>
74+
<md-expansion-panel-header>
75+
This is the expansion 2 title
76+
</md-expansion-panel-header>
77+
78+
This the expansion 2 content
79+
80+
</md-expansion-panel>
81+
82+
</md-accordion>
83+
```

‎src/material-examples/expansion-overview/expansion-overview-example.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/** No CSS for this example */

‎src/material-examples/expansion-overview/expansion-overview-example.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<md-expansion-panel>
2+
<md-expansion-panel-header>
3+
<md-panel-title>
4+
Personal data
5+
</md-panel-title>
6+
<md-panel-description>
7+
Type your name and age
8+
</md-panel-description>
9+
</md-expansion-panel-header>
10+
11+
<md-input-container>
12+
<input mdInput placeholder="First name">
13+
</md-input-container>
14+
15+
<md-input-container>
16+
<input mdInput placeholder="Age">
17+
</md-input-container>
18+
19+
</md-expansion-panel>

‎src/material-examples/expansion-overview/expansion-overview-example.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {Component} from '@angular/core';
2+
3+
4+
@Component({
5+
selector: 'expansion-overview-example',
6+
templateUrl: 'expansion-overview-example.html',
7+
})
8+
export class ExpansionOverviewExample {}

‎src/material-examples/expansion-steps/expansion-steps-example.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.example-headers-align .mat-expansion-panel-header-title,
2+
.example-headers-align .mat-expansion-panel-header-description {
3+
flex-basis: 0;
4+
}
5+
6+
.example-headers-align .mat-expansion-panel-header-description {
7+
justify-content: space-between;
8+
align-items: center;
9+
}

‎src/material-examples/expansion-steps/expansion-steps-example.html

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<md-accordion class="example-headers-align">
2+
<md-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle="true">
3+
<md-expansion-panel-header>
4+
<md-panel-title>
5+
Personal data
6+
</md-panel-title>
7+
<md-panel-description>
8+
Type your name and age
9+
<md-icon>account_circle</md-icon>
10+
</md-panel-description>
11+
</md-expansion-panel-header>
12+
13+
<md-input-container>
14+
<input mdInput placeholder="First name">
15+
</md-input-container>
16+
17+
<md-input-container>
18+
<input mdInput type="number" min="1" placeholder="Age">
19+
</md-input-container>
20+
21+
<md-action-row>
22+
<button md-button color="primary" (click)="nextStep()">Next</button>
23+
</md-action-row>
24+
</md-expansion-panel>
25+
26+
<md-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle="true">
27+
<md-expansion-panel-header>
28+
<md-panel-title>
29+
Destination
30+
</md-panel-title>
31+
<md-panel-description>
32+
Type the country name
33+
<md-icon>map</md-icon>
34+
</md-panel-description>
35+
</md-expansion-panel-header>
36+
37+
<md-input-container>
38+
<input mdInput placeholder="Country">
39+
</md-input-container>
40+
41+
<md-action-row>
42+
<button md-button color="warn" (click)="prevStep()">Previous</button>
43+
<button md-button color="primary" (click)="nextStep()">Next</button>
44+
</md-action-row>
45+
</md-expansion-panel>
46+
47+
<md-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle="true">
48+
<md-expansion-panel-header>
49+
<md-panel-title>
50+
Day of the trip
51+
</md-panel-title>
52+
<md-panel-description>
53+
Inform the date you wish to travel
54+
<md-icon>date_range</md-icon>
55+
</md-panel-description>
56+
</md-expansion-panel-header>
57+
58+
<md-input-container>
59+
<input mdInput placeholder="Date" [mdDatepicker]="picker" (focus)="picker.open()" readonly>
60+
</md-input-container>
61+
<md-datepicker #picker></md-datepicker>
62+
63+
<md-action-row>
64+
<button md-button color="warn" (click)="prevStep()">Previous</button>
65+
<button md-button color="primary" (click)="nextStep()">End</button>
66+
</md-action-row>
67+
</md-expansion-panel>
68+
69+
</md-accordion>

‎src/material-examples/expansion-steps/expansion-steps-example.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {Component} from '@angular/core';
2+
3+
4+
@Component({
5+
selector: 'expansion-steps-example',
6+
templateUrl: 'expansion-steps-example.html',
7+
styleUrls: ['expansion-steps-example.css']
8+
})
9+
export class ExpansionStepsExample {
10+
step = 0;
11+
12+
setStep(index: number) {
13+
this.step = index;
14+
}
15+
16+
nextStep() {
17+
this.step++;
18+
}
19+
20+
prevStep() {
21+
this.step--;
22+
}
23+
}

0 commit comments

Comments
 (0)