Getting Started with Kendo UI for Angular PanelBar
The PanelBar displays hierarchical data as a multi-level, expandable component.
You can describe the children items:
- By using nested
PanelBarItem
components, or - By using the items property.
Basic Usage
The following example demonstrates the PanelBar in action.
Functionality and Features
- Data binding
- Items
- Expand modes
- Templates
- Animations
- Routing
- Globalization
- Keyboard navigation
- Accessibility
Events
The following example demonstrates basic PanelBar events.
@Component({
selector: 'my-app',
styles: [`
.custom-template {
padding: 30px;
text-align: center;
}
`],
template: `
<kendo-panelbar [items]="items" (stateChange)="onPanelChange($event)">
<ng-template kendoPanelBarItemTemplate let-dataItem>
<div [class]="'custom-template'">
<h4>Custom template: </h4>
<p>{{dataItem.content}}</p>
</div>
</ng-template>
</kendo-panelbar>
`
})
class AppComponent {
private items: Array<PanelBarItemModel> = [
<PanelBarItemModel> {title: "First item", content: "Item content", expanded: true },
<PanelBarItemModel> {title: "Second item", children: [
<PanelBarItemModel> {title: "Child item" }
]
}
];
public onPanelChange(event: any) { console.log("stateChange: ", event); }
}