Skip to content

docs(expansion): create overview and examples #5823

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 19 commits into from
Jul 27, 2017
Merged

docs(expansion): create overview and examples #5823

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
8a1c7bf
docs(expansion): create overview and examples
julianobrasil Jul 17, 2017
d647370
ommit 'public' keyword
julianobrasil Jul 20, 2017
94ace13
change doc structure
julianobrasil Jul 20, 2017
f47066c
review 2
julianobrasil Jul 20, 2017
adec4ac
eliminate md-accordion mentioned in expansion panel content
julianobrasil Jul 20, 2017
b1dcc81
will's reviews
julianobrasil Jul 20, 2017
a6f26c7
break lines at 100 chars
julianobrasil Jul 20, 2017
9d1b6ba
typo
julianobrasil Jul 21, 2017
1758a93
toggleHide => hideToggle in overview
julianobrasil Jul 23, 2017
d618749
Rafael's review (travis and prefix css class)
julianobrasil Jul 23, 2017
774c53d
Rafael's review (prefix header-align css class)
julianobrasil Jul 23, 2017
d916605
new line for expansion-overview-example.css
julianobrasil Jul 23, 2017
18ae28a
overview jelbourn's reviews
julianobrasil Jul 24, 2017
a0186bd
expansion-steps-example (will's reviews)
julianobrasil Jul 24, 2017
31f74ca
new line in steps example
julianobrasil Jul 24, 2017
7d65af8
delete paragraph in header
julianobrasil Jul 25, 2017
7b42a2e
expansion panel => expansion-panel
julianobrasil Jul 25, 2017
9c4912f
add styleUrls in steps example @Component decorator
julianobrasil Jul 25, 2017
960158c
update steps example @Component decorator
julianobrasil Jul 25, 2017
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
83 changes: 83 additions & 0 deletions src/lib/expansion/expansion.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
`<md-expansion-panel>` provides an expandable details-summary view.

<!-- example(expansion-overview) -->

### Expansion-panel content

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

#### Header

The `<md-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
`<md-panel-title>` and an `<md-panel-description>`, which format the content of the
header to align with Material Design specifications.

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
<md-expansion-panel>
<md-expansion-panel-header>
<md-panel-title>
This is the expansion title
</md-panel-title>
<md-panel-description>
This is a summary of the content
</md-panel-description>
</md-expansion-panel-header>

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

</md-expansion-panel>
```

#### Action bar

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

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

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

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

### 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
<md-accordion>

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

This the expansion 1 content

</md-expansion-panel>

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

This the expansion 2 content

</md-expansion-panel>

</md-accordion>
```
1 change: 1 addition & 0 deletions src/material-examples/expansion-overview/expansion-overview-example.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/** No CSS for this example */
19 changes: 19 additions & 0 deletions src/material-examples/expansion-overview/expansion-overview-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<md-expansion-panel>
<md-expansion-panel-header>
<md-panel-title>
Personal data
</md-panel-title>
<md-panel-description>
Type your name and age
</md-panel-description>
</md-expansion-panel-header>

<md-input-container>
<input mdInput placeholder="First name">
</md-input-container>

<md-input-container>
<input mdInput placeholder="Age">
</md-input-container>

</md-expansion-panel>
8 changes: 8 additions & 0 deletions src/material-examples/expansion-overview/expansion-overview-example.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import {Component} from '@angular/core';


@Component({
selector: 'expansion-overview-example',
templateUrl: 'expansion-overview-example.html',
})
export class ExpansionOverviewExample {}
9 changes: 9 additions & 0 deletions src/material-examples/expansion-steps/expansion-steps-example.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.example-headers-align .mat-expansion-panel-header-title,
.example-headers-align .mat-expansion-panel-header-description {
flex-basis: 0;
}

.example-headers-align .mat-expansion-panel-header-description {
justify-content: space-between;
align-items: center;
}
69 changes: 69 additions & 0 deletions src/material-examples/expansion-steps/expansion-steps-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<md-accordion class="example-headers-align">
<md-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle="true">
<md-expansion-panel-header>
<md-panel-title>
Personal data
</md-panel-title>
<md-panel-description>
Type your name and age
<md-icon>account_circle</md-icon>
</md-panel-description>
</md-expansion-panel-header>

<md-input-container>
<input mdInput placeholder="First name">
</md-input-container>

<md-input-container>
<input mdInput type="number" min="1" placeholder="Age">
</md-input-container>

<md-action-row>
<button md-button color="primary" (click)="nextStep()">Next</button>
</md-action-row>
</md-expansion-panel>

<md-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle="true">
<md-expansion-panel-header>
<md-panel-title>
Destination
</md-panel-title>
<md-panel-description>
Type the country name
<md-icon>map</md-icon>
</md-panel-description>
</md-expansion-panel-header>

<md-input-container>
<input mdInput placeholder="Country">
</md-input-container>

<md-action-row>
<button md-button color="warn" (click)="prevStep()">Previous</button>
<button md-button color="primary" (click)="nextStep()">Next</button>
</md-action-row>
</md-expansion-panel>

<md-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle="true">
<md-expansion-panel-header>
<md-panel-title>
Day of the trip
</md-panel-title>
<md-panel-description>
Inform the date you wish to travel
<md-icon>date_range</md-icon>
</md-panel-description>
</md-expansion-panel-header>

<md-input-container>
<input mdInput placeholder="Date" [mdDatepicker]="picker" (focus)="picker.open()" readonly>
</md-input-container>
<md-datepicker #picker></md-datepicker>

<md-action-row>
<button md-button color="warn" (click)="prevStep()">Previous</button>
<button md-button color="primary" (click)="nextStep()">End</button>
</md-action-row>
</md-expansion-panel>

</md-accordion>
22 changes: 22 additions & 0 deletions src/material-examples/expansion-steps/expansion-steps-example.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import {Component} from '@angular/core';


@Component({
selector: 'expansion-overview-example',
templateUrl: 'expansion-overview-example.html',
})
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

@Component({
  selector: 'expansion-steps-example',
  templateUrl: 'expansion-steps-example.html',
  styleUrls: ['expansion-steps-example.css'],
})

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added the missing styleUrls

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The template and selector need to change too! Looks like copy/paste from the other example

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The steps example was built over the overview one.

export class ExpansionStepsExample {
step = 0;

setStep(index: number) {
this.step = index;
}

nextStep() {
this.step++;
}

prevStep() {
this.step--;
}
}