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

…ized 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 · Aug 30, 2017 · 9eabda8 · 9eabda8
1 parent 43b7c34
commit 9eabda8
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) {