docs(expansion): create overview and examples

src/lib/expansion/expansion.md

@@ -0,0 +1,80 @@
+`<md-expansion-panel>` provides a way to show and hide content, by collapsing and expanding a view with animation.
+
+<!-- example(expansion-overview) -->
+
+### Expansion panel content
+
+Each expansion panel has a header section and an action (optional) sections.
+
+When grouped by an `<md-accordion>` 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.
+
+#### Header
+
+The header section is always visible at the top of the component and contains a `<md-panel-title>` and a description `<md-panel-description>` subsections.
+
+The `<md-panel-title>` subsecion is shown in the begining of the header, followed by the `<md-panel-description>` 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 hidden by setting the input property `toogleHide` to `true`. 
+
+```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>...</p>
+
+</md-expansion-panel>
+```
+
+#### Actions
+
+The actions section is optional and fixed at the bottom, being 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>...</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 multi="false">
+    <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>
+```
+

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

@@ -0,0 +1 @@
+/** No CSS for this example */

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

@@ -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>

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 {}

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;
+}

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

@@ -0,0 +1,70 @@
+<md-accordion class="headers-align">
+  <md-expansion-panel [expanded]="step === 0" (opened)="openEvent(0)" hideToggle="true">
+    <md-expansion-panel-header>
+      <md-panel-title>
+        Personal data
+      </md-panel-title>
+      <md-panel-description>
+        <div>Type your name and age</div>
+        <div class="icons-to-right"><md-icon>account_circle</md-icon></div>
+      </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-action-row>
+      <button md-button color="primary" (click)="nextStep()">Next</button>
+    </md-action-row>
+  </md-expansion-panel>
+
+  <md-expansion-panel [expanded]="step === 1" (opened)="openEvent(1)" hideToggle="true">
+    <md-expansion-panel-header>
+      <md-panel-title>
+        Destination
+      </md-panel-title>
+      <md-panel-description>
+        <div>Type the country name</div>
+        <div class="icons-to-right"><md-icon>map</md-icon></div>
+      </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)="openEvent(2)" hideToggle="true">
+    <md-expansion-panel-header>
+      <md-panel-title>
+        Day of the trip
+      </md-panel-title>
+      <md-panel-description>
+        <div>Inform the date you wish to travel</div>
+        <div class="icons-to-right"><md-icon>date_range</md-icon></div>
+      </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>

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 {
+  step = 0;
+
+  openEvent(stepNumb: number) {
+    this.step = stepNumb;
+  }
+
+  nextStep() {
+    this.step++;
+  }
+
+  prevStep() {
+    this.step--;
+  }
+}