Blazor - New Accordion Control (v22.1)

As you may already know, v22.1 ships with a new Blazor Accordion component. Our Accordion control allows you to organize content within collapsible groups. These collapsible groups can be used to reveal/hide content via a mouse click.

Each Accordion group can include a title, icon, and expand\collapse button. The Accordion can expand one or more groups (at your discretion), position expand\collapse buttons for its groups and subgroups, and use templates to render custom content for both root and nested items.

Manage Navigation within your Blazor App

You can use our Blazor Accordion component to manage navigation paths within your Blazor-powered web app. The Accordion will allow you to introduce a flat or hierarchical navigation structure. To implement this in your app, assign a data source to the Data property, add a DxAccordionDataMapping instance to the DataMappings object (within the component's markup), and map item properties. Activate the ShowFilterPanel option to allow users to filter items:

<DxAccordion Data=@DemoItems
    ShowFilterPanel="true"
    @ref="Accordion">
    <DataMappings>
        <DxAccordionDataMapping CssClass="CssClass" Text="ItemName" Key="Id"
          ParentKey="ParentId" NavigateUrl="Url"></DxAccordionDataMapping>
    </DataMappings>
</DxAccordion>

@code {
      public IEnumerable<DemoItem> DemoItems;
      @* ... *@
}

Create Custom Collapsible Content

You can organize custom content as a set of collapsible groups. Create a single group at the root level to hide specific content within the page or incorporate a set of multiple stacked cards (for instance, you can use stacked cards to create FAQ or registration form sections). The component also allows you to apply templates for content customization.

<DxAccordion ExpandMode="AccordionExpandMode.SingleOrNone">
  <Items>
    <DxAccordionItem Text="What is Blazor?">
      <ContentTemplate>
        <div class="p-2">
          <ul>
            <li>Blazor runs C# code directly in the browser.</li>
            <li>Blazor gives you access to .NET on the client side so you can
              re-use libraries and code from the server side.</li>
            <li>Blazor works in all modern browsers and is built on open Web
              standards.</li>
          </ul>
        </div>
      </ContentTemplate>
    </DxAccordionItem>
      @* ... *@
    </Items>
</DxAccordion>

Your Feedback Counts

Please take a moment to respond to the following survey question. Your answers will help us understand your needs and refine future Accordion-related development plans.

Free DevExpress Products - Get Your Copy Today