MaterialExpansionPanel class

A material-styled expansion-panel.

One or more panels are grouped together in a expansion-panel-set. When a panel is clicked on, the panel contents expand. A panel consists of a name, a value, optional secondary text, and the expanded panel contents.

Content element with attribute value will be used as the "value" of the panel contents when it is in a collapsed state

Interactions with a panel are done through the parent expansion-set. The set takes into account the state of the other panels in the set, and issues the appropriate actions onto each individual panel.

Attributes:

wide -- When specified the width of the panel when expanded, is slightly wider then its width when collapsed.
flat -- Indicates that the panel should not "float" or separate from other panels when expanded.
forceContentWhenClosed -- Keeps expansion panel content in the DOM when the expansion panel is closed. This should only be used in rare circumstances.

Content Reference:

focusOnOpen -- Mark a Focusable or DOM element with #focusOnOpen in the content to have that item be focused when the expansion panel opens.

Implemented types

Annotations

@Component(selector: 'material-expansionpanel', directives: [AutoIdDirective, ButtonDirective, DeferredContentDirective, MaterialIconComponent, MaterialSaveCancelButtonsDirective, MaterialYesNoButtonsComponent, NgIf, EnterAcceptsDirective, KeyboardOnlyFocusIndicatorDirective, KeyUpBoundaryDirective], providers: [ExistingProvider(DeferredContentAware, MaterialExpansionPanel), ExistingProvider(HasDisabled, MaterialExpansionPanel), ExistingProvider(FocusableItem, MaterialExpansionPanel), ExistingProvider(Focusable, MaterialExpansionPanel)], templateUrl: 'material_expansionpanel.html', styleUrls: ['material_expansionpanel.scss.css'], changeDetection: ChangeDetectionStrategy.onPush, visibility: Visibility.all)

Constructors

MaterialExpansionPanel(NgZone _ngZone, ChangeDetectorRef _changeDetector, DomService _domService, @Attribute('shouldExpandOnLeft') String? expandOnLeft, @Attribute('forceContentWhenClosed') String? forceContent)

Properties

actionContent ← HtmlElement?: no getter
activeSaveCancelAction → bool: no setter
alwaysHideExpandIcon ↔ bool: If true, the expand icon should never be visible.
getter/setter pair
alwaysShowExpandIcon ↔ bool: If true, the expand icon should always be visible regardless whether a custom icon is used.
getter/setter pair
anotherExpanded ↔ bool: getter/setter pair
autoFocusChild ↔ AutoFocusDirective?: Set the auto focus child so that we can focus on it when the panel opens.
getter/setter pair
cancel → Stream<AsyncAction<bool>?>: Event fired when panel is cancelled.
no setter
cancelDisplayed ↔ bool: Option to set if widget should show cancel button true by default.
getter/setter pair
cancelText ↔ String: The text to be shown on the cancel button.
getter/setter pair
close → Stream<AsyncAction<bool>?>: Event fired when panel is trying to close.
no setter
closeOnSave ↔ bool: If true, after a successful save, the panel will attempt to close.
getter/setter pair
closePanelMsg → String: no setter
contentVisible → Stream<bool>: Component publishes to this stream to control the visibility of contents.
no setteroverride
contentWrapper ← HtmlElement?: no getter
disabled ↔ bool: If true, the panel will remain in the collapsed state with no way to expand it, or if expanded by default, it will stay in expanded state.
getter/setter pairoverride
disableHeaderExpansion ↔ bool: If true, clicking on the header does not expand or collapse the panel.
getter/setter pair
enterAccepts ↔ bool: If set to true, the toolbelt buttons will listen for Enter keyup events and trigger the yes action on them.
getter/setter pair
expandCollapse ← ButtonDirective?: no getter
expandIcon ↔ String: If a custom icon is used, then the icon disappears when the panel is expanded.
getter/setter pair
focusmove → Stream<FocusMoveEvent>: The item publishes to this stream in order to move focus to another item.
no setteroverride
focusOnOpenChild ← Object?: Sets the focus child so that we can focus on it when the panel opens.
no getter
forceContentWhenClosed → bool: final
groupAriaLabel ↔ String?: Aria label used to describe the header.
getter/setter pair
hasCustomExpandIcon → bool: no setter
hashCode → int: The hash code for this object.
no setterinherited
headerAriaLevel ↔ int?: Level of the heading.
getter/setter pair
headerContent ← HtmlElement?: no getter
headerHidden → bool: no setter
headerMsg → String?: no setter
headerPanel ← HtmlElement?: no getter
headerRole → String: no setter
hideExpandedHeader ↔ bool: If true, the header which displays the name of the panel is hidden when the panel is expanded.
getter/setter pair
initialized ↔ bool: getter/setter pair
isExpanded ↔ bool: If true, the panel is expanded by default, if false, the panel is closed.
getter/setter pair
isExpandedChange → Stream<bool?>: Event fired when the panel is either collapsed or expanded.
no setter
isExpandedChangeByUserAction → Stream<bool>: Event fired when the panel is collapsed or expanded by the user.
no setter
mainContent ← HtmlElement?: no getter
mainPanel ← HtmlElement?: no getter
name ↔ String?: A short name label for the expansion panel.
getter/setter pair
open → Stream<AsyncAction<bool>?>: Event fired when panel is trying to open.
no setter
openPanelMsg → String: no setter
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
save → Stream<AsyncAction<bool>?>: Event fired when panel is saved.
no setter
saveDisabled ↔ bool: Whether the save button is disabled.
getter/setter pair
saveText ↔ String: The text to be shown on the save button.
getter/setter pair
secondaryText ↔ String?: Some optional secondary summary text that describes the state of the widget hosted inside the panel.
getter/setter pair
shouldExpandOnLeft → bool: final
shouldFlipExpandIcon → bool: no setter
shouldShowExpandIcon → bool: no setter
shouldShowHiddenHeaderExpandIcon → bool: no setter
showSaveCancel ↔ bool: Option to set if widget should show save/cancel buttons true by default.
getter/setter pair
tabbable ← bool: Moves focus item into (tabIndex='0') or out of (tabIndex='-1') tab order.
no getteroverride

Methods

attributeToString(Object? value) → String?
changeState(bool expand, bool byUserAction, StreamController stream) → Future<bool>: Changes the state of the panel either to expanded or not. Returns a Future
collapse({bool byUserAction = true}) → Future<bool>
doCancel() → Future<bool>
doSave() → Future<bool>
expand({bool byUserAction = true}) → Future<bool>
focus() → void: Item/component focuses itself
override
handleExpandIconClick() → void
handleHeaderClick() → void
keydown(KeyboardEvent event) → void
ngOnDestroy() → void: Executed before the directive is removed from the DOM and destroyed.
ngOnInit() → void: Executed after the first change detection run for a directive.
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toString() → String: A string representation of this object.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited

Static Properties

expandAriaMsg → String: final