From 63411dc5000992d8dd68ab69dcf94a19fb8cc321 Mon Sep 17 00:00:00 2001 From: Juliano Date: Thu, 27 Jul 2017 13:51:29 -0300 Subject: [PATCH] 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 --- src/lib/expansion/expansion.md | 83 +++++++++++++++++++ .../expansion-overview-example.css | 1 + .../expansion-overview-example.html | 19 +++++ .../expansion-overview-example.ts | 8 ++ .../expansion-steps-example.css | 9 ++ .../expansion-steps-example.html | 69 +++++++++++++++ .../expansion-steps-example.ts | 23 +++++ 7 files changed, 212 insertions(+) create mode 100644 src/lib/expansion/expansion.md create mode 100644 src/material-examples/expansion-overview/expansion-overview-example.css create mode 100644 src/material-examples/expansion-overview/expansion-overview-example.html create mode 100644 src/material-examples/expansion-overview/expansion-overview-example.ts create mode 100644 src/material-examples/expansion-steps/expansion-steps-example.css create mode 100644 src/material-examples/expansion-steps/expansion-steps-example.html create mode 100644 src/material-examples/expansion-steps/expansion-steps-example.ts diff --git a/src/lib/expansion/expansion.md b/src/lib/expansion/expansion.md new file mode 100644 index 00000000000..fff3acc28d8 --- /dev/null +++ b/src/lib/expansion/expansion.md @@ -0,0 +1,83 @@ +`` provides an expandable details-summary view. + + + +### Expansion-panel content + +Each expansion-panel must include a header and may optionally include an action bar. + +#### Header + +The `` shows a summary of the panel content and acts +as the control for expanding and collapsing. This header may optionally contain an +`` and an ``, 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 + + + + This is the expansion title + + + This is a summary of the content + + + +

This is the primary content of the 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 + + + This is the expansion title + + +

This is the primary content of the 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 + + + + + This is the expansion 1 title + + + This the expansion 1 content + + + + + + This is the expansion 2 title + + + This the expansion 2 content + + + + +``` diff --git a/src/material-examples/expansion-overview/expansion-overview-example.css b/src/material-examples/expansion-overview/expansion-overview-example.css new file mode 100644 index 00000000000..7432308753e --- /dev/null +++ b/src/material-examples/expansion-overview/expansion-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/material-examples/expansion-overview/expansion-overview-example.html b/src/material-examples/expansion-overview/expansion-overview-example.html new file mode 100644 index 00000000000..ccde7f2b384 --- /dev/null +++ b/src/material-examples/expansion-overview/expansion-overview-example.html @@ -0,0 +1,19 @@ + + + + Personal data + + + Type your name and age + + + + + + + + + + + + \ No newline at end of file diff --git a/src/material-examples/expansion-overview/expansion-overview-example.ts b/src/material-examples/expansion-overview/expansion-overview-example.ts new file mode 100644 index 00000000000..e47663d02d8 --- /dev/null +++ b/src/material-examples/expansion-overview/expansion-overview-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'expansion-overview-example', + templateUrl: 'expansion-overview-example.html', +}) +export class ExpansionOverviewExample {} diff --git a/src/material-examples/expansion-steps/expansion-steps-example.css b/src/material-examples/expansion-steps/expansion-steps-example.css new file mode 100644 index 00000000000..7a97afef2ac --- /dev/null +++ b/src/material-examples/expansion-steps/expansion-steps-example.css @@ -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; +} diff --git a/src/material-examples/expansion-steps/expansion-steps-example.html b/src/material-examples/expansion-steps/expansion-steps-example.html new file mode 100644 index 00000000000..d14b48557ba --- /dev/null +++ b/src/material-examples/expansion-steps/expansion-steps-example.html @@ -0,0 +1,69 @@ + + + + + Personal data + + + Type your name and age + account_circle + + + + + + + + + + + + + + + + + + + + Destination + + + Type the country name + map + + + + + + + + + + + + + + + + + Day of the trip + + + Inform the date you wish to travel + date_range + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/material-examples/expansion-steps/expansion-steps-example.ts b/src/material-examples/expansion-steps/expansion-steps-example.ts new file mode 100644 index 00000000000..4790865e781 --- /dev/null +++ b/src/material-examples/expansion-steps/expansion-steps-example.ts @@ -0,0 +1,23 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'expansion-steps-example', + templateUrl: 'expansion-steps-example.html', + styleUrls: ['expansion-steps-example.css'] +}) +export class ExpansionStepsExample { + step = 0; + + setStep(index: number) { + this.step = index; + } + + nextStep() { + this.step++; + } + + prevStep() { + this.step--; + } +}