Telerik UI for ASP.NET Core PanelBar Basic Usage
- EXAMPLE
- VIEW SOURCE
-
Change Theme
defaultDefault Theme
- Main
- Main Dark
- Nordic
- Ocean Blue
- Ocean Blue A11Y
- Purple
- Turquoise
Bootstrap Theme- Main
- Bootstrap 3
- Bootstrap 3 Dark
- Main Dark
- Nordic
- Turquoise
- Turquoise Dark
- Urban
- Vintage
Material Theme- Main
- Arctic
- Lime Dark
- Main Dark
- Nova
Classic Theme- Main
- Green
- Green Dark
- Lavender
- Lavender Dark
- Main Dark
- Metro
- Metro Dark
- Moonlight
- Opal
- Opal Dark
- Silver
- Silver Dark
- Uniform
Fluent Theme- Main
Also available for:
CLIENT-SIDE API HTML HELPER APIThe PanelBar component is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Description
The Telerik UI for ASP.NET Core PanelBar is a multi-level component that allows users to expand and collapse its items. The PanelBar enables you to create a nice, accordion-like collapsible structure with hierarchical data.
You have full control over the PanelBar items and can display them as icons, images, HTML markup, or Kendo UI Templates. Also, based on your scenario, the component can bind to remote or local data.
As an expandable component, the PanelBar supports animation effects when the items are expanded or collapsed through user interaction.
The current demo shows a PanelBar with four sections that include images and text, and a drop-down list of options within one of the panels, and also demonstrates how to use properties such as ExpandMode
, Expanded
, and Enabled
.
The ASP.NET Core PanelBar component is part of Telerik UI for ASP.NET Core, a professional-grade UI library with 110+ components for building modern and feature-rich web applications. The UI for ASP.NET Core PanelBar is a server-side wrapper for the Kendo UI for jQuery PanelBar component and supports an HtmlHelper and a TagHelper mode.
Functionality and Features
- Data binding—Declare all items within the helper declaration, or use AJAX or server binding.
- Expand modes—Expand only a single item or enable the multiple expand mode to expand multiple items at a time.
- Images—Include images or sprite icons in the PanelBar items.
- Templates—Customize the appearance of the PanelBar items through templates.
- Animations—Enable the animation effects when expanding or collapsing PanelBar items.
- Events—Subscribe to the PanelBar events to implement any custom logic when a specified item is selected, expanded, collapsed, and so on.
- API—Take advantage of the variety of client-side API methods of the component.
- Accessibility and keyboard navigation—The PanelBar is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.
- RTL support—The PanelBar enables you to render its content in a right-to-left direction.