PanelBarComponent
Represents the Kendo UI PanelBar component for Angular. Displays hierarchical data as an expandable and collapsible accordion-style interface (see overview).
Definition
Package:@progress/kendo-angular-layout
Selector:kendo-panelbar
Export Name:Accessible in templates as #kendoPanelbarInstance="kendoPanelbar"
Syntax:
@Component({
selector: 'my-app',
template: `
<kendo-panelbar [items]="items" expandMode="single">
</kendo-panelbar>
`
})
class AppComponent {
items = [
{ title: 'Item 1', expanded: true, content: 'Content 1' },
{ title: 'Item 2', content: 'Content 2' }
];
}Inputs
animate
boolean
Sets the animate state of the PanelBar (see example).
true
Sets the expand mode of the PanelBar through the PanelBarExpandMode enum (see example).
PanelBarExpandMode.Default
height
any
Sets the height of the component when the "full" expand mode is used.
This option is ignored when the "multiple" or "single" expand modes are used.
'400px'
Sets the items of the PanelBar as an array of PanelBarItemModel instances
(see example).
keepItemContent
boolean | "loadOnDemand"
Controls how the PanelBar renders item content.
The available options are:
true—Renders all items' content and persists them in the DOM.false—Removes collapsed items' content from the DOM."loadOnDemand"—Loads items' content only when expanded for the first time. Collapsed items' content is not rendered until the item is expanded.
For more information, refer to the Rendering Modes article.
false
selectable
boolean
Allows the PanelBar to modify the selected state of the items.
true
Events
Fires when an item is about to be collapsed. This event is preventable. If you cancel it, the item will remain expanded (see example).
Fires when an item is about to be expanded. This event is preventable. If you cancel it, the item will remain collapsed (see example).
Fires when an item is clicked (see example).
Fires when an item is about to be selected. This event is preventable. If you cancel it, the item will not be selected (see example).
Fires when the state of the PanelBar changes. This event is triggered when an item is selected, expanded, or collapsed. (see example). The event data contains a collection of all items that are modified.