diff --git a/src/demo-app/expansion/expansion-demo.html b/src/demo-app/expansion/expansion-demo.html index 71f8aac725ae..5b43d91cf559 100644 --- a/src/demo-app/expansion/expansion-demo.html +++ b/src/demo-app/expansion/expansion-demo.html @@ -30,10 +30,16 @@

matAccordion

Accordion Options

Allow Multi Expansion - Hide Indicators Disable Panel 2 Show Panel 3
+
+ + Start + End + Hidden + +

Accordion Style

Default diff --git a/src/lib/expansion/accordion.ts b/src/lib/expansion/accordion.ts index fab66e184c0e..1372218e2c28 100644 --- a/src/lib/expansion/accordion.ts +++ b/src/lib/expansion/accordion.ts @@ -28,9 +28,7 @@ export type MatAccordionDisplayMode = 'default' | 'flat'; }) export class MatAccordion extends _CdkAccordion { /** Whether the expansion indicator should be hidden. */ - @Input() get hideToggle(): boolean { return this._hideToggle; } - set hideToggle(show: boolean) { this._hideToggle = coerceBooleanProperty(show); } - private _hideToggle: boolean = false; + @Input() hideToggle = 'end'; /** * The display mode used for all expansion panels in the accordion. Currently two display diff --git a/src/lib/expansion/expansion-panel-header.html b/src/lib/expansion/expansion-panel-header.html index 41c329965859..2d72c6060011 100644 --- a/src/lib/expansion/expansion-panel-header.html +++ b/src/lib/expansion/expansion-panel-header.html @@ -3,5 +3,5 @@ - diff --git a/src/lib/expansion/expansion-panel-header.ts b/src/lib/expansion/expansion-panel-header.ts index c2f5369fb93b..94b0e436329f 100644 --- a/src/lib/expansion/expansion-panel-header.ts +++ b/src/lib/expansion/expansion-panel-header.ts @@ -132,8 +132,11 @@ export class MatExpansionPanelHeader implements OnDestroy { } /** Gets whether the expand indicator should be shown. */ - _showToggle(): boolean { - return !this.panel.hideToggle && !this.panel.disabled; + _indicatorLocation(): string { + if (this.panel.disabled) { + return 'hidden'; + } + return this.panel.hideToggle; } /** Handle keyup event calling to toggle() if appropriate. */ diff --git a/src/lib/expansion/expansion-panel.ts b/src/lib/expansion/expansion-panel.ts index 87684803b50b..a945bafb1f8d 100644 --- a/src/lib/expansion/expansion-panel.ts +++ b/src/lib/expansion/expansion-panel.ts @@ -91,7 +91,7 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2, export class MatExpansionPanel extends _MatExpansionPanelMixinBase implements CanDisable, OnChanges, OnDestroy { /** Whether the toggle indicator should be hidden. */ - @Input() hideToggle: boolean = false; + @Input() hideToggle: string = 'end'; /** Stream that emits for changes in `@Input` properties. */ _inputChanges = new Subject(); @@ -107,11 +107,11 @@ export class MatExpansionPanel extends _MatExpansionPanelMixinBase } /** Whether the expansion indicator should be hidden. */ - _getHideToggle(): boolean { + _getHideToggle(): string { if (this.accordion) { - return this.accordion.hideToggle; + return this.accordion.hideToggle ? '' : 'hidden'; } - return this.hideToggle; + return this.hideToggle ? '' : 'hidden'; } /** Determines whether the expansion panel should have spacing between it and its siblings. */