Demos About Radzen
Search Results for

    Show / Hide Table of Contents

    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}");
        }
    }
    

    Boost your Blazor development with Radzen

    Radzen is a desktop tool that gives you the power to create line of business applications. Build and launch Blazor apps visually, while we generate clean code for you.

    Learn More

    Download Radzen
    Download Radzen
    In This Article
    Back to top Radzen Blazor Components, © 2018-2022 Radzen. Source Code licensed under MIT