feat(expansion-panel): allow for the panel header height to be custom…

…ized (#6643) Uses the new Angular animations features, that allow for dynamic values to be passed to an animation, to let consumers customize the `md-expansion-panel-header` height. Fixes #5641.
angular · Sep 1, 2017 · 11e2239 · 11e2239
1 parent 730e7ae
commit 11e2239
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/src/demo-app/expansion/expansion-demo.html b/src/demo-app/expansion/expansion-demo.html
@@ -1,6 +1,7 @@
 <h1>Single Expansion Panel</h1>
+
 <md-expansion-panel class="md-expansion-demo-width" #myPanel>
-  <md-expansion-panel-header>
+  <md-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
     <mat-panel-description>This is a panel description.</mat-panel-description>
     <mat-panel-title>Panel Title</mat-panel-title>
   </md-expansion-panel-header>
@@ -10,7 +11,17 @@ <h1>Single Expansion Panel</h1>
     <button md-button>SAVE</button>
   </md-action-row>
 </md-expansion-panel>
+
 <br>
+<md-form-field>
+  <input mdInput [(ngModel)]="collapsedHeight" placeholder="Collapsed height">
+</md-form-field>
+
+<md-form-field>
+  <input mdInput [(ngModel)]="expandedHeight" placeholder="Expanded height">
+</md-form-field>
+<br>
+
 <h1>Accordion</h1>
 <div>
   <p>Accordion Options</p>

diff --git a/src/demo-app/expansion/expansion-demo.ts b/src/demo-app/expansion/expansion-demo.ts
@@ -13,4 +13,6 @@ export class ExpansionDemo {
   hideToggle = false;
   disabled = false;
   showPanel3 = true;
+  expandedHeight: string;
+  collapsedHeight: string;
 }
diff --git a/src/lib/expansion/expansion-panel-header.ts b/src/lib/expansion/expansion-panel-header.ts
@@ -16,6 +16,7 @@ import {
   OnDestroy,
   Renderer2,
   ElementRef,
+  Input,
 } from '@angular/core';
 import {
   trigger,
@@ -56,7 +57,13 @@ import {Subscription} from 'rxjs/Subscription';
     '[class.mat-expanded]': '_isExpanded()',
     '(click)': '_toggle()',
     '(keyup)': '_keyup($event)',
-    '[@expansionHeight]': '_getExpandedState()',
+    '[@expansionHeight]': `{
+        value: _getExpandedState(),
+        params: {
+          collapsedHeight: collapsedHeight,
+          expandedHeight: expandedHeight
+        }
+    }`,
   },
   animations: [
     trigger('indicatorRotate', [
@@ -65,8 +72,16 @@ import {Subscription} from 'rxjs/Subscription';
       transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
     ]),
     trigger('expansionHeight', [
-      state('collapsed', style({height: '48px'})),
-      state('expanded', style({height: '64px'})),
+      state('collapsed', style({
+        height: '{{collapsedHeight}}',
+      }), {
+        params: {collapsedHeight: '48px'},
+      }),
+      state('expanded', style({
+        height: '{{expandedHeight}}'
+      }), {
+        params: {expandedHeight: '64px'}
+      }),
       transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
     ]),
   ],
@@ -93,6 +108,12 @@ export class MdExpansionPanelHeader implements OnDestroy {
     _focusOriginMonitor.monitor(_element.nativeElement, _renderer, false);
   }
 
+  /** Height of the header while the panel is expanded. */
+  @Input() expandedHeight: string;
+
+  /** Height of the header while the panel is collapsed. */
+  @Input() collapsedHeight: string;
+
   /** Toggles the expanded state of the panel. */
   _toggle(): void {
     if (!this.panel.disabled) {