Accordion component

This article demonstrates how to use the Accordion component.

Single item expand

<RadzenAccordion>
    <Items>
        <RadzenAccordionItem Text="Orders" Icon="account_balance_wallet">
            Details for Orders
        </RadzenAccordionItem>
        <RadzenAccordionItem Text="Employees" Icon="account_box">
            Details for Employees
        </RadzenAccordionItem>
        <RadzenAccordionItem Text="Customers" Icon="accessibility">
            Details for Customers
        </RadzenAccordionItem>
    </Items>
</RadzenAccordion>

Multiple items expand

<RadzenAccordion Multiple="true">
    <Items>
        <RadzenAccordionItem Text="Orders" Icon="account_balance_wallet">
            Details for Orders
        </RadzenAccordionItem>
        <RadzenAccordionItem Text="Employees" Icon="account_box">
            Details for Employees
        </RadzenAccordionItem>
        <RadzenAccordionItem Text="Customers" Icon="accessibility">
            Details for Customers
        </RadzenAccordionItem>
    </Items>
</RadzenAccordion>

Expand/Collapse events

<RadzenAccordion Collapse=@(args => Change(args, "collapsed"))
                 Expand=@(args => Change(args, "expanded"))>
    <Items>
        <RadzenAccordionItem Text="Orders" Icon="account_balance_wallet">
            Details for Orders
        </RadzenAccordionItem>
        <RadzenAccordionItem Text="Employees" Icon="account_box">
            Details for Employees
        </RadzenAccordionItem>
        <RadzenAccordionItem Text="Customers" Icon="accessibility">
            Details for Customers
        </RadzenAccordionItem>
    </Items>
</RadzenAccordion>

@code {
    void Change(object value, string action)
    {
        Console.WriteLine($"Item with index {value} {action}");
    }
}