expansion panel

Author: annieyw

src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html

@@ -2,7 +2,9 @@
   <button mat-button (click)="accordion.openAll()">Expand All</button>
   <button mat-button (click)="accordion.closeAll()">Collapse All</button>
 </div>
+<!-- #docregion multi -->
 <mat-accordion class="example-headers-align" multi>
+<!-- #enddocregion multi -->
   <mat-expansion-panel>
     <mat-expansion-panel-header>
       <mat-panel-title>
@@ -25,8 +27,9 @@
     </mat-form-field>
 
   </mat-expansion-panel>
-
+<!-- #docregion disabled -->
   <mat-expansion-panel disabled>
+<!-- #enddocregion disabled -->
     <mat-expansion-panel-header>
       <mat-panel-title>
         Destination

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

@@ -1,24 +1,19 @@
 <mat-accordion>
-  <mat-expansion-panel>
+<!-- #docregion basic-panel -->
+<!-- #docregion hide-toggle -->
+  <mat-expansion-panel hideToggle>
+<!-- #enddocregion hide-toggle -->
     <mat-expansion-panel-header>
       <mat-panel-title>
-        Personal data
+        This is the expansion title
       </mat-panel-title>
       <mat-panel-description>
-        Type your name and age
+        This is a summary of the content
       </mat-panel-description>
     </mat-expansion-panel-header>
-
-    <mat-form-field>
-      <mat-label>First name</mat-label>
-      <input matInput>
-    </mat-form-field>
-
-    <mat-form-field>
-      <mat-label>Age</mat-label>
-      <input matInput type="number" min="1">
-    </mat-form-field>
+    <p>This is the primary content of the panel.</p>
   </mat-expansion-panel>
+<!-- #enddocregion basic-panel -->
   <mat-expansion-panel (opened)="panelOpenState = true"
                        (closed)="panelOpenState = false">
     <mat-expansion-panel-header>

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

@@ -19,10 +19,11 @@
       <mat-label>Age</mat-label>
       <input matInput type="number" min="1">
     </mat-form-field>
-
+<!-- #docregion action-bar -->
     <mat-action-row>
       <button mat-button color="primary" (click)="nextStep()">Next</button>
     </mat-action-row>
+<!-- #enddocregion action-bar -->
   </mat-expansion-panel>
 
   <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle>

src/material/expansion/expansion.md

@@ -4,100 +4,51 @@
 
 ### Expansion-panel content
 
-Each expansion-panel must include a header and may optionally include an action bar.
-
 #### Header
 
 The `<mat-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
 `<mat-panel-title>` and an `<mat-panel-description>`, which format the content of the
 header to align with Material Design specifications.
 
+<!-- example({"example":"expansion-overview",
+              "file":"expansion-overview-example.html", 
+              "region":"basic-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.
+`hideToggle` property.     
 
-```html
-<mat-expansion-panel>
-  <mat-expansion-panel-header>
-    <mat-panel-title>
-      This is the expansion title
-    </mat-panel-title>
-    <mat-panel-description>
-      This is a summary of the content
-    </mat-panel-description>
-  </mat-expansion-panel-header>
-
-  <p>This is the primary content of the panel.</p>
-
-</mat-expansion-panel>
-```
+<!-- example({"example":"expansion-overview",
+              "file":"expansion-overview-example.html", 
+              "region":"hide-toggle"}) -->         
 
 #### Action bar
 
 Actions may optionally be included at the bottom of the panel, visible only when the expansion
 is in its expanded state.
 
-```html
-<mat-expansion-panel>
-  <mat-expansion-panel-header>
-    This is the expansion title
-  </mat-expansion-panel-header>
-
-  <p>This is the primary content of the panel.</p>
-
-  <mat-action-row>
-    <button mat-button>Click me</button>
-  </mat-action-row>
-</mat-expansion-panel>
-```
-
+<!-- example({"example":"expansion-steps",
+              "file":"expansion-steps-example.html", 
+              "region":"action-bar"}) -->
 #### Disabling a panel
 
 Expansion panels can be disabled using the `disabled` attribute. A disabled expansion panel can't
 be toggled by the user, but can still be manipulated programmatically.
 
-```html
-<mat-expansion-panel [disabled]="isDisabled">
-  <mat-expansion-panel-header>
-    This is the expansion title
-  </mat-expansion-panel-header>
-  <mat-panel-description>
-    This is a summary of the content
-  </mat-panel-description>
-</mat-expansion-panel>
-```
-
+<!-- example({"example":"expansion-expand-collapse-all",
+              "file":"expansion-expand-collapse-all-example.html", 
+              "region":"disabled"}) -->
 
 ### 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
-<mat-accordion>
-
-  <mat-expansion-panel>
-    <mat-expansion-panel-header>
-      This is the expansion 1 title
-    </mat-expansion-panel-header>
-
-    This the expansion 1 content
-
-  </mat-expansion-panel>
-
-  <mat-expansion-panel>
-    <mat-expansion-panel-header>
-      This is the expansion 2 title
-    </mat-expansion-panel-header>
-
-    This the expansion 2 content
-
-  </mat-expansion-panel>
-
-</mat-accordion>
-```
+<!-- example({"example":"expansion-expand-collapse-all",
+              "file":"expansion-expand-collapse-all-example.html", 
+              "region":"multi"}) -->
 
 ### Lazy rendering
 By default, the expansion panel content will be initialized even when the panel is closed.