From 8a1c7bf18840652975bdd7a35f00ae248ecdadf6 Mon Sep 17 00:00:00 2001 From: Juliano Date: Mon, 17 Jul 2017 14:58:49 -0300 Subject: [PATCH 01/19] docs(expansion): create overview and examples --- src/lib/expansion/expansion.md | 79 +++++++++++++++++++ .../expansion-overview-example.css | 1 + .../expansion-overview-example.html | 19 +++++ .../expansion-overview-example.ts | 8 ++ .../expansion-steps-example.css | 12 +++ .../expansion-steps-example.html | 70 ++++++++++++++++ .../expansion-steps-example.ts | 22 ++++++ 7 files changed, 211 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 000000000000..a6c31ac14680 --- /dev/null +++ b/src/lib/expansion/expansion.md @@ -0,0 +1,79 @@ +Angular Material expansion provides a way to show and hide lightweight content, by collapsing and expanding a view with a nice animation. The `expanded` input allows to choose among the collapsed or expanded state. + +Each expansion has a header and an action sections. The header section is always visible at the top of the component and contains a title and a description subsections. The action section is fixed at the bottom, being visible when the expansion is in expanded state + +When grouped by an `` element, the expansions can be used for the creation of flows, as it brings up the possibility to expand one view at a time. + + + +### Events + +The `closed` and `opened` output events are emitted when the expansion is collapsed/expanded. + +### Headers section + +By default, the expansion header has a toogle sign at the right edge, pointing up when the expansion is expanded and down when it's collapsed. The toogle icon can be hiden setting the `toogleHide` to `true`. + +The `` subsecion is shown in the begining of the header, followed by the `` subsection, which is supposed to have a sumary of what's in the expansion content. + +```html + + + This is the expansion title + + + + + + + This the expansion content + + +``` + +For more complex headers, use the `` and `` header selectors: + +```html + + + + This is the expansion title + + + This is a summary of the content + + + +

...

+ + +``` + +### Accordion + +It's possible to group expansions in a fancy way. The `multi="true"` input allows the expansions state to be set independently of each other. When `multi="false"` (default) just one expansion 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 000000000000..a3c296437609 --- /dev/null +++ b/src/material-examples/expansion-overview/expansion-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ \ No newline at end of file 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 000000000000..ccde7f2b3842 --- /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 000000000000..e47663d02d86 --- /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 000000000000..36562487f0a4 --- /dev/null +++ b/src/material-examples/expansion-steps/expansion-steps-example.css @@ -0,0 +1,12 @@ +.headers-align .mat-expansion-panel-header-title, +.headers-align .mat-expansion-panel-header-description { + flex-basis: 0; +} + +.icons-to-right { + display: inline-block; + width: 100%; + text-align: right; + margin-top: 5px; + color: blue; +} 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 000000000000..157cc2580511 --- /dev/null +++ b/src/material-examples/expansion-steps/expansion-steps-example.html @@ -0,0 +1,70 @@ + + + + + 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
+ + + + + + + + + + + + + + + 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 000000000000..137f94065013 --- /dev/null +++ b/src/material-examples/expansion-steps/expansion-steps-example.ts @@ -0,0 +1,22 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'expansion-overview-example', + templateUrl: 'expansion-overview-example.html', +}) +export class ExpansionStepsExample { + public step = 0; + + openEvent(stepNumb: number) { + this.step = stepNumb; + } + + nextStep() { + this.step++; + } + + prevStep() { + this.step--; + } +} From d647370e080b7d5bdafa77e49a16463fdd19a1e2 Mon Sep 17 00:00:00 2001 From: Juliano Date: Thu, 20 Jul 2017 13:49:47 -0300 Subject: [PATCH 02/19] ommit 'public' keyword --- .../expansion-steps/expansion-steps-example.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/material-examples/expansion-steps/expansion-steps-example.ts b/src/material-examples/expansion-steps/expansion-steps-example.ts index 137f94065013..4667dc256402 100644 --- a/src/material-examples/expansion-steps/expansion-steps-example.ts +++ b/src/material-examples/expansion-steps/expansion-steps-example.ts @@ -6,7 +6,7 @@ import {Component} from '@angular/core'; templateUrl: 'expansion-overview-example.html', }) export class ExpansionStepsExample { - public step = 0; + step = 0; openEvent(stepNumb: number) { this.step = stepNumb; From 94ace1329d09b36855eb66d887eed1c1710866a0 Mon Sep 17 00:00:00 2001 From: Juliano Date: Thu, 20 Jul 2017 14:46:47 -0300 Subject: [PATCH 03/19] change doc structure --- src/lib/expansion/expansion.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/lib/expansion/expansion.md b/src/lib/expansion/expansion.md index a6c31ac14680..79493c2d952f 100644 --- a/src/lib/expansion/expansion.md +++ b/src/lib/expansion/expansion.md @@ -1,10 +1,12 @@ -Angular Material expansion provides a way to show and hide lightweight content, by collapsing and expanding a view with a nice animation. The `expanded` input allows to choose among the collapsed or expanded state. +`` provides a way to show and hide lightweight content, by collapsing and expanding a view with a nice animation. -Each expansion has a header and an action sections. The header section is always visible at the top of the component and contains a title and a description subsections. The action section is fixed at the bottom, being visible when the expansion is in expanded state + -When grouped by an `` element, the expansions can be used for the creation of flows, as it brings up the possibility to expand one view at a time. +The `expanded` input allows to choose among the collapsed or expanded state. - +Each expansion panel has a header and an action sections. The header section is always visible at the top of the component and contains a title and a description subsections. The action section is fixed at the bottom, being visible when the expansion is in expanded state. + +When grouped by an `` element the expansion panels can be used to create ordered views or flows, as it brings up the possibility to expand one view at a time. ### Events @@ -12,7 +14,7 @@ The `closed` and `opened` output events are emitted when the expansion is collap ### Headers section -By default, the expansion header has a toogle sign at the right edge, pointing up when the expansion is expanded and down when it's collapsed. The toogle icon can be hiden setting the `toogleHide` to `true`. +By default, the expansion panel header has a toogle sign at the right edge, pointing up when the panel is expanded and down when it's collapsed. The toogle icon can be hiden by setting `toogleHide` to `true`. The `` subsecion is shown in the begining of the header, followed by the `` subsection, which is supposed to have a sumary of what's in the expansion content. @@ -51,7 +53,7 @@ For more complex headers, use the `` and ` ### Accordion -It's possible to group expansions in a fancy way. The `multi="true"` input allows the expansions state to be set independently of each other. When `multi="false"` (default) just one expansion can be expanded at a given time: +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 From f47066c3a8ff5b4143d4643a08947c56c92c972f Mon Sep 17 00:00:00 2001 From: Juliano Date: Thu, 20 Jul 2017 16:59:50 -0300 Subject: [PATCH 04/19] review 2 --- src/lib/expansion/expansion.md | 47 +++++++++---------- .../expansion-steps-example.css | 14 +++--- 2 files changed, 30 insertions(+), 31 deletions(-) diff --git a/src/lib/expansion/expansion.md b/src/lib/expansion/expansion.md index 79493c2d952f..bd41b20c5dec 100644 --- a/src/lib/expansion/expansion.md +++ b/src/lib/expansion/expansion.md @@ -1,53 +1,52 @@ -`` provides a way to show and hide lightweight content, by collapsing and expanding a view with a nice animation. +`` provides a way to show and hide content, by collapsing and expanding a view with animation. -The `expanded` input allows to choose among the collapsed or expanded state. +### Expansion panel content -Each expansion panel has a header and an action sections. The header section is always visible at the top of the component and contains a title and a description subsections. The action section is fixed at the bottom, being visible when the expansion is in expanded state. +Each expansion panel has a header section and an action (optional) sections. When grouped by an `` element the expansion panels can be used to create ordered views or flows, as it brings up the possibility to expand one view at a time. -### Events +#### Header -The `closed` and `opened` output events are emitted when the expansion is collapsed/expanded. +The header section is always visible at the top of the component and contains a `` and a description `` subsections. -### Headers section +The `` subsecion is shown in the begining of the header, followed by the `` subsection, which is supposed to contain a sumary of what's in the expansion content. -By default, the expansion panel header has a toogle sign at the right edge, pointing up when the panel is expanded and down when it's collapsed. The toogle icon can be hiden by setting `toogleHide` to `true`. - -The `` subsecion is shown in the begining of the header, followed by the `` subsection, which is supposed to have a sumary of what's in the expansion content. +By default, the expansion panel header has a toogle sign at the right edge, pointing up when the panel is expanded and down when it's collapsed. The toogle icon can be hidden by setting the input property `toogleHide` to `true`. ```html - This is the expansion title + + This is the expansion title + + + This is a summary of the content + - - - - - This the expansion content +

...

 ``` -For more complex headers, use the `` and `` header selectors: +#### Actions + +The actions section is optional and fixed at the bottom, being visible only when the expansion is in its expanded state. ```html - - This is the expansion title - - - This is a summary of the content - + This is the expansion title

...

+ + + ``` @@ -60,7 +59,7 @@ Multiple expansion panels can be combined into an accordion. The `multi="true"` - This is the expansion 1 title + This is the expansion 1 title This the expansion 1 content @@ -69,7 +68,7 @@ Multiple expansion panels can be combined into an accordion. The `multi="true"` - This is the expansion 2 title + This is the expansion 2 title This the expansion 2 content diff --git a/src/material-examples/expansion-steps/expansion-steps-example.css b/src/material-examples/expansion-steps/expansion-steps-example.css index 36562487f0a4..a700538ae91c 100644 --- a/src/material-examples/expansion-steps/expansion-steps-example.css +++ b/src/material-examples/expansion-steps/expansion-steps-example.css @@ -1,12 +1,12 @@ -.headers-align .mat-expansion-panel-header-title, +.headers-align .mat-expansion-panel-header-title, .headers-align .mat-expansion-panel-header-description { flex-basis: 0; } .icons-to-right { - display: inline-block; - width: 100%; - text-align: right; - margin-top: 5px; - color: blue; -} + display: inline-block; + width: 100%; + text-align: right; + margin-top: 5px; + color: blue; +} \ No newline at end of file From adec4ac3763f84a6cbd0949e35e37102168b3031 Mon Sep 17 00:00:00 2001 From: Juliano Date: Thu, 20 Jul 2017 18:40:55 -0300 Subject: [PATCH 05/19] eliminate md-accordion mentioned in expansion panel content --- src/lib/expansion/expansion.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/lib/expansion/expansion.md b/src/lib/expansion/expansion.md index bd41b20c5dec..6766de9a4079 100644 --- a/src/lib/expansion/expansion.md +++ b/src/lib/expansion/expansion.md @@ -4,9 +4,7 @@ ### Expansion panel content -Each expansion panel has a header section and an action (optional) sections. - -When grouped by an `` element the expansion panels can be used to create ordered views or flows, as it brings up the possibility to expand one view at a time. +Each expansion panel has a header section (mandatory) and an actions (optional) sections. #### Header From b1dcc816265886144d4e50b63ab4cac2d004673e Mon Sep 17 00:00:00 2001 From: Juliano Date: Thu, 20 Jul 2017 18:47:26 -0300 Subject: [PATCH 06/19] will's reviews --- src/lib/expansion/expansion.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/expansion/expansion.md b/src/lib/expansion/expansion.md index 6766de9a4079..61cdcb870395 100644 --- a/src/lib/expansion/expansion.md +++ b/src/lib/expansion/expansion.md @@ -10,9 +10,9 @@ Each expansion panel has a header section (mandatory) and an actions (optional) The header section is always visible at the top of the component and contains a `` and a description `` subsections. -The `` subsecion is shown in the begining of the header, followed by the `` subsection, which is supposed to contain a sumary of what's in the expansion content. +The `` subsection is shown in the beginning of the header, followed by the `` subsection, which is supposed to contain a summary of what's in the expansion content. -By default, the expansion panel header has a toogle sign at the right edge, pointing up when the panel is expanded and down when it's collapsed. The toogle icon can be hidden by setting the input property `toogleHide` to `true`. +By default, the expansion panel header has a toggle icon at the right edge, pointing up when the panel is expanded and down when it's collapsed. The toogle icon can be hidden by setting the input property `toggleHide` to `true`. ```html @@ -32,7 +32,7 @@ By default, the expansion panel header has a toogle sign at the right edge, poin #### Actions -The actions section is optional and fixed at the bottom, being visible only when the expansion is in its expanded state. +The actions section is optional and fixed at the bottom, visible only when the expansion is in its expanded state. ```html From a6f26c73c9503ebf8b0cae68e1b479d7adb3fed2 Mon Sep 17 00:00:00 2001 From: Juliano Date: Thu, 20 Jul 2017 19:17:21 -0300 Subject: [PATCH 07/19] break lines at 100 chars --- src/lib/expansion/expansion.md | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/src/lib/expansion/expansion.md b/src/lib/expansion/expansion.md index 61cdcb870395..e777b565a317 100644 --- a/src/lib/expansion/expansion.md +++ b/src/lib/expansion/expansion.md @@ -1,4 +1,5 @@ -`` provides a way to show and hide content, by collapsing and expanding a view with animation. +`` provides a way to show and hide content, by collapsing and expanding a +view with animation. @@ -8,11 +9,16 @@ Each expansion panel has a header section (mandatory) and an actions (optional) #### Header -The header section is always visible at the top of the component and contains a `` and a description `` subsections. +The header section is always visible at the top of the component and contains a `` + and a description `` subsections. -The `` subsection is shown in the beginning of the header, followed by the `` subsection, which is supposed to contain a summary of what's in the expansion content. +The `` subsection is shown in the beginning of the header, followed by the +`` subsection, which is supposed to contain a summary of what's in the +expansion content. -By default, the expansion panel header has a toggle icon at the right edge, pointing up when the panel is expanded and down when it's collapsed. The toogle icon can be hidden by setting the input property `toggleHide` to `true`. +By default, the expansion panel header has a toggle icon at the right edge, pointing up when +the panel is expanded and down when it's collapsed. The toogle icon can be hidden by setting the +input property `toggleHide` to `true`. ```html @@ -32,7 +38,8 @@ By default, the expansion panel header has a toggle icon at the right edge, poin #### Actions -The actions section is optional and fixed at the bottom, visible only when the expansion is in its expanded state. +The actions section is optional and fixed at the bottom, visible only when the expansion is in its +expanded state. ```html @@ -50,12 +57,14 @@ The actions section is optional and fixed at the bottom, visible only when the e ### 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: +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 @@ -75,4 +84,3 @@ Multiple expansion panels can be combined into an accordion. The `multi="true"` ``` - From 9d1b6bacdb0b6956e63d6ac7351b4ff7816e41dc Mon Sep 17 00:00:00 2001 From: Juliano Date: Thu, 20 Jul 2017 23:13:49 -0300 Subject: [PATCH 08/19] typo --- src/lib/expansion/expansion.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/expansion/expansion.md b/src/lib/expansion/expansion.md index e777b565a317..a3fba76f35c9 100644 --- a/src/lib/expansion/expansion.md +++ b/src/lib/expansion/expansion.md @@ -17,7 +17,7 @@ The `` subsection is shown in the beginning of the header, follo expansion content. By default, the expansion panel header has a toggle icon at the right edge, pointing up when -the panel is expanded and down when it's collapsed. The toogle icon can be hidden by setting the +the panel is expanded and down when it's collapsed. The toggle icon can be hidden by setting the input property `toggleHide` to `true`. ```html From 1758a93fc51a3379083cd2de32cf216e5f9f1a39 Mon Sep 17 00:00:00 2001 From: Juliano Date: Sun, 23 Jul 2017 06:36:09 -0300 Subject: [PATCH 09/19] toggleHide => hideToggle in overview --- src/lib/expansion/expansion.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/expansion/expansion.md b/src/lib/expansion/expansion.md index a3fba76f35c9..27ae2ebccbcf 100644 --- a/src/lib/expansion/expansion.md +++ b/src/lib/expansion/expansion.md @@ -18,7 +18,7 @@ expansion content. By default, the expansion panel header has a toggle icon at the right edge, pointing up when the panel is expanded and down when it's collapsed. The toggle icon can be hidden by setting the -input property `toggleHide` to `true`. +input property `hideToggle` to `true`. ```html From d61874985481212ad7f8f90f71be06a08387a90a Mon Sep 17 00:00:00 2001 From: Juliano Date: Sun, 23 Jul 2017 11:09:23 -0300 Subject: [PATCH 10/19] Rafael's review (travis and prefix css class) --- .../expansion-steps/expansion-steps-example.css | 4 ++-- .../expansion-steps/expansion-steps-example.html | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/material-examples/expansion-steps/expansion-steps-example.css b/src/material-examples/expansion-steps/expansion-steps-example.css index a700538ae91c..d41b80ec4cc6 100644 --- a/src/material-examples/expansion-steps/expansion-steps-example.css +++ b/src/material-examples/expansion-steps/expansion-steps-example.css @@ -3,10 +3,10 @@ flex-basis: 0; } -.icons-to-right { +.example-icons-to-right { display: inline-block; width: 100%; text-align: right; margin-top: 5px; color: blue; -} \ No newline at end of file +} diff --git a/src/material-examples/expansion-steps/expansion-steps-example.html b/src/material-examples/expansion-steps/expansion-steps-example.html index 157cc2580511..3cf0b982c45e 100644 --- a/src/material-examples/expansion-steps/expansion-steps-example.html +++ b/src/material-examples/expansion-steps/expansion-steps-example.html @@ -6,7 +6,7 @@
Type your name and age
-
account_circle
+
account_circle
 @@ -30,7 +30,7 @@
Type the country name
-
map
+
map
 @@ -51,7 +51,7 @@
Inform the date you wish to travel
-
date_range
+
date_range
 From 774c53d7386078f4dab9424496e1b5188593349e Mon Sep 17 00:00:00 2001 From: Juliano Date: Sun, 23 Jul 2017 11:13:40 -0300 Subject: [PATCH 11/19] Rafael's review (prefix header-align css class) --- .../expansion-steps/expansion-steps-example.css | 4 ++-- .../expansion-steps/expansion-steps-example.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/material-examples/expansion-steps/expansion-steps-example.css b/src/material-examples/expansion-steps/expansion-steps-example.css index d41b80ec4cc6..2d40b449e6de 100644 --- a/src/material-examples/expansion-steps/expansion-steps-example.css +++ b/src/material-examples/expansion-steps/expansion-steps-example.css @@ -1,5 +1,5 @@ -.headers-align .mat-expansion-panel-header-title, -.headers-align .mat-expansion-panel-header-description { +.example-headers-align .mat-expansion-panel-header-title, +.example-headers-align .mat-expansion-panel-header-description { flex-basis: 0; } diff --git a/src/material-examples/expansion-steps/expansion-steps-example.html b/src/material-examples/expansion-steps/expansion-steps-example.html index 3cf0b982c45e..bc0ec6a3c92f 100644 --- a/src/material-examples/expansion-steps/expansion-steps-example.html +++ b/src/material-examples/expansion-steps/expansion-steps-example.html @@ -1,4 +1,4 @@ - + From d91660534b0fbe5efde26426f3dcf0b5353c3f8e Mon Sep 17 00:00:00 2001 From: Juliano Date: Sun, 23 Jul 2017 11:39:19 -0300 Subject: [PATCH 12/19] new line for expansion-overview-example.css --- .../expansion-overview/expansion-overview-example.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/material-examples/expansion-overview/expansion-overview-example.css b/src/material-examples/expansion-overview/expansion-overview-example.css index a3c296437609..7432308753e6 100644 --- a/src/material-examples/expansion-overview/expansion-overview-example.css +++ b/src/material-examples/expansion-overview/expansion-overview-example.css @@ -1 +1 @@ -/** No CSS for this example */ \ No newline at end of file +/** No CSS for this example */ From 18ae28ab395be6fb0e8c76ee8e223f4304bca08d Mon Sep 17 00:00:00 2001 From: Juliano Date: Mon, 24 Jul 2017 16:30:01 -0300 Subject: [PATCH 13/19] overview jelbourn's reviews --- src/lib/expansion/expansion.md | 35 +++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/src/lib/expansion/expansion.md b/src/lib/expansion/expansion.md index 27ae2ebccbcf..955c43141d72 100644 --- a/src/lib/expansion/expansion.md +++ b/src/lib/expansion/expansion.md @@ -1,24 +1,25 @@ -`` provides a way to show and hide content, by collapsing and expanding a -view with animation. +`` provides a expandable details-summary view. -### Expansion panel content +### Expansion-panel content -Each expansion panel has a header section (mandatory) and an actions (optional) sections. +Each expansion panel must include a header and may optionally include an action bar. #### Header -The header section is always visible at the top of the component and contains a `` - and a description `` subsections. +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. -The `` subsection is shown in the beginning of the header, followed by the -`` subsection, which is supposed to contain a summary of what's in the -expansion content. +The `` is shown in the beginning of the header, followed by the +``, which is intended to contain a summary of the primary content +of the panel. -By default, the expansion panel header has a toggle icon at the right edge, pointing up when -the panel is expanded and down when it's collapsed. The toggle icon can be hidden by setting the -input property `hideToggle` to `true`. +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 @@ -31,14 +32,14 @@ input property `hideToggle` to `true`. -

...

+

This is the primary content of the panel.

 ``` -#### Actions +#### Action bar -The actions section is optional and fixed at the bottom, visible only when the expansion is in its +Actions may optionally be included at the bottom of the panel, visible only when the expansion is in its expanded state. ```html @@ -47,7 +48,7 @@ expanded state. This is the expansion title -

...

+

This is the primary content of the panel.

@@ -57,7 +58,7 @@ expanded state. ### Accordion -Multiple expansion panels can be combined into an accordion. The `multi="true"` input allows the +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: From a0186bd231d1a4fd6e87955060539b164cf646dd Mon Sep 17 00:00:00 2001 From: Juliano Date: Mon, 24 Jul 2017 17:19:42 -0300 Subject: [PATCH 14/19] expansion-steps-example (will's reviews) --- src/lib/expansion/expansion.md | 2 +- .../expansion-steps-example.css | 11 ++++------ .../expansion-steps-example.html | 20 +++++++++---------- .../expansion-steps-example.ts | 4 ++-- 4 files changed, 17 insertions(+), 20 deletions(-) diff --git a/src/lib/expansion/expansion.md b/src/lib/expansion/expansion.md index 955c43141d72..72803afae3eb 100644 --- a/src/lib/expansion/expansion.md +++ b/src/lib/expansion/expansion.md @@ -1,4 +1,4 @@ -`` provides a expandable details-summary view. +`` provides an expandable details-summary view. diff --git a/src/material-examples/expansion-steps/expansion-steps-example.css b/src/material-examples/expansion-steps/expansion-steps-example.css index 2d40b449e6de..516c2b569568 100644 --- a/src/material-examples/expansion-steps/expansion-steps-example.css +++ b/src/material-examples/expansion-steps/expansion-steps-example.css @@ -3,10 +3,7 @@ flex-basis: 0; } -.example-icons-to-right { - display: inline-block; - width: 100%; - text-align: right; - margin-top: 5px; - color: blue; -} +.example-headers-align .mat-expansion-panel-header-description { + justify-content: space-between; + align-items: center; +} \ No newline at end of file diff --git a/src/material-examples/expansion-steps/expansion-steps-example.html b/src/material-examples/expansion-steps/expansion-steps-example.html index bc0ec6a3c92f..06ff13499e25 100644 --- a/src/material-examples/expansion-steps/expansion-steps-example.html +++ b/src/material-examples/expansion-steps/expansion-steps-example.html @@ -1,12 +1,12 @@ - + Personal data -
Type your name and age
-
account_circle
+ Type your name and age + account_circle @@ -15,7 +15,7 @@ - + @@ -23,14 +23,14 @@ - + Destination -
Type the country name
-
map
+ Type the country name + map @@ -44,14 +44,14 @@ - + Day of the trip -
Inform the date you wish to travel
-
date_range
+ Inform the date you wish to travel + date_range diff --git a/src/material-examples/expansion-steps/expansion-steps-example.ts b/src/material-examples/expansion-steps/expansion-steps-example.ts index 4667dc256402..eb5f5d0b6019 100644 --- a/src/material-examples/expansion-steps/expansion-steps-example.ts +++ b/src/material-examples/expansion-steps/expansion-steps-example.ts @@ -8,8 +8,8 @@ import {Component} from '@angular/core'; export class ExpansionStepsExample { step = 0; - openEvent(stepNumb: number) { - this.step = stepNumb; + setStep(index: number) { + this.step = index; } nextStep() { From 31f74caca993f8b25a434711deb626c141c7d1bd Mon Sep 17 00:00:00 2001 From: Juliano Date: Mon, 24 Jul 2017 18:24:10 -0300 Subject: [PATCH 15/19] new line in steps example --- .../expansion-steps-example.css | 2 +- .../expansion-steps-example.html | 23 +++++++++---------- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/material-examples/expansion-steps/expansion-steps-example.css b/src/material-examples/expansion-steps/expansion-steps-example.css index 516c2b569568..7a97afef2acc 100644 --- a/src/material-examples/expansion-steps/expansion-steps-example.css +++ b/src/material-examples/expansion-steps/expansion-steps-example.css @@ -6,4 +6,4 @@ .example-headers-align .mat-expansion-panel-header-description { justify-content: space-between; align-items: center; -} \ No newline at end of file +} diff --git a/src/material-examples/expansion-steps/expansion-steps-example.html b/src/material-examples/expansion-steps/expansion-steps-example.html index 06ff13499e25..d14b48557baa 100644 --- a/src/material-examples/expansion-steps/expansion-steps-example.html +++ b/src/material-examples/expansion-steps/expansion-steps-example.html @@ -9,20 +9,20 @@ account_circle - + - + - + - + @@ -33,17 +33,17 @@ map - + - + - + @@ -54,17 +54,16 @@ date_range - + - + - + - + \ No newline at end of file From 7d65af8a5e63ab0e9583e946b21d3716984169f1 Mon Sep 17 00:00:00 2001 From: Juliano Date: Mon, 24 Jul 2017 21:45:26 -0300 Subject: [PATCH 16/19] delete paragraph in header --- src/lib/expansion/expansion.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/lib/expansion/expansion.md b/src/lib/expansion/expansion.md index 72803afae3eb..cb01eec9331c 100644 --- a/src/lib/expansion/expansion.md +++ b/src/lib/expansion/expansion.md @@ -13,10 +13,6 @@ as the control for expanding and collapsing. This header may optionally contain `` and an ``, which format the content of the header to align with Material Design specifications. -The `` is shown in the beginning of the header, followed by the -``, which is intended to contain a summary of the primary content -of the 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. From 7b42a2efa1bf2a584c0fe454ca6a7fb196eb5fcb Mon Sep 17 00:00:00 2001 From: Juliano Date: Mon, 24 Jul 2017 21:47:18 -0300 Subject: [PATCH 17/19] expansion panel => expansion-panel --- src/lib/expansion/expansion.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/expansion/expansion.md b/src/lib/expansion/expansion.md index cb01eec9331c..fff3acc28d8a 100644 --- a/src/lib/expansion/expansion.md +++ b/src/lib/expansion/expansion.md @@ -4,7 +4,7 @@ ### Expansion-panel content -Each expansion panel must include a header and may optionally include an action bar. +Each expansion-panel must include a header and may optionally include an action bar. #### Header From 9c4912f35e07f8d2f7c7a8d6c543533743478cee Mon Sep 17 00:00:00 2001 From: Juliano Date: Tue, 25 Jul 2017 16:06:08 -0300 Subject: [PATCH 18/19] add styleUrls in steps example @Component decorator --- src/material-examples/expansion-steps/expansion-steps-example.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/material-examples/expansion-steps/expansion-steps-example.ts b/src/material-examples/expansion-steps/expansion-steps-example.ts index eb5f5d0b6019..48ba8bcce4e8 100644 --- a/src/material-examples/expansion-steps/expansion-steps-example.ts +++ b/src/material-examples/expansion-steps/expansion-steps-example.ts @@ -4,6 +4,7 @@ import {Component} from '@angular/core'; @Component({ selector: 'expansion-overview-example', templateUrl: 'expansion-overview-example.html', + styleUrls: ['expansion-steps-example.css'] }) export class ExpansionStepsExample { step = 0; From 960158cf73024e7af70b1bd8cad8a7353b3e8f52 Mon Sep 17 00:00:00 2001 From: Juliano Date: Tue, 25 Jul 2017 16:15:55 -0300 Subject: [PATCH 19/19] update steps example @Component decorator --- .../expansion-steps/expansion-steps-example.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/material-examples/expansion-steps/expansion-steps-example.ts b/src/material-examples/expansion-steps/expansion-steps-example.ts index 48ba8bcce4e8..4790865e7818 100644 --- a/src/material-examples/expansion-steps/expansion-steps-example.ts +++ b/src/material-examples/expansion-steps/expansion-steps-example.ts @@ -2,8 +2,8 @@ import {Component} from '@angular/core'; @Component({ - selector: 'expansion-overview-example', - templateUrl: 'expansion-overview-example.html', + selector: 'expansion-steps-example', + templateUrl: 'expansion-steps-example.html', styleUrls: ['expansion-steps-example.css'] }) export class ExpansionStepsExample {