ExpansionPanelComponent
Represents the Kendo UI ExpansionPanel component for Angular. Provides an expandable and collapsible content container with customizable header and animation (see overview).
Definition
Package:@progress/kendo-angular-layout
Selector:kendo-expansionpanel
Export Name:Accessible in templates as #kendoExpansionPanelInstance="kendoExpansionPanel"
Syntax:
<kendo-expansionpanel
title="Chile"
subtitle="South America"
[expanded]="isExpanded">
There are various theories about the origin of the word Chile.
</kendo-expansionpanel>Inputs
animation?
number | boolean
Specifies the animation settings of the ExpansionPanel (see example).
true
collapseIcon
string
Sets a custom icon via CSS class(es) for the expanded state of the component (see example).
disabled
boolean
Specifies whether the ExpansionPanel is disabled. If disabled, the ExpansionPanel can be neither expanded nor collapsed (see example).
false
expanded
boolean
Specifies whether the ExpansionPanel is expanded. The property supports two-way binding (see example).
false
expandIcon
string
Sets a custom icon via CSS class(es) for the collapsed state of the component (see example).
subtitle
string
Specifies the secondary text in the header of the ExpansionPanel, which renders next to the collapse/expand icon (see example).
''
svgCollapseIcon
SVGIcon
Defines an SVG icon for the collapsed state of the component. You can use either an existing Kendo SVG icon or a custom one.
svgExpandIcon
SVGIcon
Defines an SVG icon for the expanded state of the component. You can use either an existing Kendo SVG icon or a custom one.
title
string
Specifies the primary text in the header of the ExpansionPanel (see example).
''
Events
Fires when the expanded state of the ExpansionPanel is about to change. This event is preventable (see example).
collapse
EventEmitter<any>
Fires when the ExpansionPanel is collapsed. If there is animation it fires when the animation is complete (see example).
expand
EventEmitter<any>
Fires when the ExpansionPanel is expanded. If there is animation it fires when the animation is complete (see example).
expandedChange
EventEmitter<boolean>
Fires when the expanded property of the component is updated.
Used to provide a two-way binding for the expanded property
(see example).
Methods
Toggles the visibility of the ExpansionPanel (see example).
Specifies whether the ExpansionPanel will be expanded or collapsed.