Blazor Accordion Overview
The Ignite UI for Blazor Accordion is a GUI component for building vertical expandable panels with clickable headers and associated content sections, displayed in a single container. The accordion is commonly used to reduce the need of scrolling across multiple sections of content on a single page. It offers keyboard navigation and API to control the underlying panels' expansion state.
Users are enabled to interact and navigate among a list of items, such as thumbnails or labels. Each one of those items can be toggled (expanded or collapsed) in order to reveal the containing information. Depending on the configuration, there can be a single or multiple expanded items at a time.
Blazor Accordion Example
The following is a basic Ignite UI for Blazor Accordion example of a FAQ section. It operates as an accordion, with individually working sections. You can toggle each text block with a single click, while expanding multiple panels at the same time. This way you can read information more easily, without having to go back and forth between an automatically expanding and collapsing panel, which conceals the previously opened section every time.
In it, you can see how to define an accordion and its expansion panels. The sample also demonstrates the two types of expansion behavior. The switch button sets the
SingleExpand property to toggle between single and multiple branches to be expanded at a time.
Getting Started with Blazor Accordion
Before using the
IgbAccordion, you need to register it as follows:
// in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule));
You will also need to link an additional CSS file to apply the styling to the
IgbAccordion component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
Now you can start with a basic configuration of the
IgbAccordion and its panels.
Each section in the Blazor Accordion Component is defined using an Blazor Expansion Panel.
Open properties, which give you the ability to configure the states of the panel as per your requirement.
Declaring an Accordion
The accordion wraps all expansion panel`s declared inside it.
<IgbAccordion SingleExpand=true> <IgbExpansionPanel> <div slot="title">Title Panel 1</div> <div> Content Panel 1 </div> </IgbExpansionPanel> <IgbExpansionPanel> <div slot="title">Title Panel 2</div> <div> Content Panel 2 </div> </IgbExpansionPanel> </IgbAccordion>
As demonstrated above, the
SingleExpandproperty gives you the ability to set whether single or multiple panels can be expanded at a time.
Blazor Accordion Customization Example
With the Blazor Accordion, you can customize the header and content panel's appearance.
The sample below demonstrates how elaborate filtering options can be implemented using the built-in slots of the
Nested Blazor Accordions Scenario
In the following Blazor Accordion example is created a complex FAQ section in order to illustrate how you can go about this common application scenario. In the sample nested
IgbAccordion is achieved by adding an accordion inside an expansion panel.
Keyboard navigation in the Blazor Accordion provides a rich variety of keyboard interactions to the end-user. This functionality is enabled by default and allows end-users to easily navigate through the panels.
The Accordion navigation is compliant with W3C accessibility standards and convenient to use.
- Arrow Down - moves the focus to the panel below
- Arrow Up - moves the focus to the panel above
- Alt + Arrow Down - opens the focused panel in the accordion
- Alt + Arrow Up - closes the focused panel in the accordion
- Shift + Alt + Arrow Down - opens all enabled panels (if singleExpand is set to true opens the focused panel)
- Shift + Alt + Arrow Up - closes all enabled panels
- Home - navigates to the FIRST enabled panel in the accordion
- End - navigates to the LAST enabled panel in the accordion