Items
You can instantiate the PanelBar items by initializing them as PanelBarItem components and use their corresponding properties.
The PanelBar provides configuration options for:
- Setting the titles of its items
- Rendering images next to the item titles
- Rendering icons next to the item titles
- Setting the selected state of the items
- Enabling and disabling the items
- Expanding and collapsing the items
Titles
Use one of the following approaches to provide the PanelBar item title:
- Set the PanelBarItem title option.
- Use the kendoPanelBarItemTitle template directive to render any custom content.
The
kendoPanelBarItemTitledirective overrides the PanelBarItemtitleoption.
The following example demonstrates both approaches for setting the PanelBar item title.
Title Images
You can load images next to the titles of the PanelBar items by using the imageUrl option.
Title Icons
You can render icons next to the titles of the PanelBar items by either:
- Setting the SVGicon option (for build-in icons), or
- Setting the iconClass option (for custom icons).
Selected State
You can set the selected state to a PanelBar item by using the selected property.
Disabled State
You can disable PanelBar items by setting the disabled property to true.
Expanded State
By default, all PanelBar items are collapsed. To expand them, set the expanded property to true.