All Components

Animations

You can enable or disable the expand and collapse animations of the PanelBar.

To control the behavior of the animations, specify the animate property of the PanelBar.

@Component({
    selector: 'my-app',
    template: `
        <kendo-panelbar [items]="items" [animate]="false"></kendo-panelbar>
    `
})

class AppComponent {
    private items: Array<PanelBarItemModel> = [
        <PanelBarItemModel> {
            title: "Teams",
            expanded: true,
            children: [
                <PanelBarItemModel> {
                    title: "Team 1"
                },
                <PanelBarItemModel> {
                    title: "Team 2"
                },
                <PanelBarItemModel> {
                    title: "Team 3"
                }
            ]
        },
        <PanelBarItemModel> {
            title: "Forecast",
            children: [
                <PanelBarItemModel> {
                    title: "Q1 2017"
                },
                <PanelBarItemModel> {
                    title: "Q2 2017"
                },
                <PanelBarItemModel> {
                    title: "Q3 2017"
                },
                <PanelBarItemModel> {
                    title: "Q4 2017"
                }
            ]
        }
    ];
}
In this article