docs(expansion): create overview and examples

src/lib/expansion/expansion.md

@@ -0,0 +1,87 @@
+`<md-expansion-panel>` provides a 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.
+
+The `<md-panel-title>` is shown in the beginning of the header, followed by the 
+`<md-panel-description>`, 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.
+
+```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>
+```

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 @@
+.example-headers-align .mat-expansion-panel-header-title, 
+.example-headers-align .mat-expansion-panel-header-description {
+  flex-basis: 0;
+}
+
+.example-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="example-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="example-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="example-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="example-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--;
+  }
+}