menu

Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class AccordionItem - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class AccordionItem

    A class that represents accordion panels of SfAccordion component.

    Inheritance
    System.Object
    AccordionItem
    Namespace: Syncfusion.Blazor.Navigations
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class AccordionItem : OwningComponentBase
    Remarks

    You can render header and content of accordion by specifying value to corresponding property.

    Examples

    In the below code example, a basic accordion panel has been added using AccordionItem tag directive.

    <SfAccordion>
        <AccordionItems>
            <AccordionItem Header="ASP.NET">
                <ContentTemplate>
                    Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services.
                </ContentTemplate>
            </AccordionItem>
            <AccordionItem Header="ASP.NET MVC">
                <ContentTemplate>
                    The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.
                </ContentTemplate>
            </AccordionItem>
            <AccordionItem Header="JavaScript">
                <ContentTemplate>
                    JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
                </ContentTemplate>
            </AccordionItem>
        </AccordionItems>
    </SfAccordion>

    Constructors

    AccordionItem()

    Declaration
    public AccordionItem()

    Properties

    ChildContent

    Gets or sets the child content for the accordion item.

    Declaration
    public RenderFragment ChildContent { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.RenderFragment

    The value used to build the content.

    Content

    Gets or sets the text content to be displayed for accordion item.

    Declaration
    public string Content { get; set; }
    Property Value
    Type Description
    System.String

    Accepts a string value. The default value is null.

    ContentTemplate

    Gets or sets template as Microsoft.AspNetCore.Components.RenderFragment, that defines custom appearance of accordion content.

    Declaration
    public RenderFragment ContentTemplate { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.RenderFragment

    A template content that specifies the visualization of accordion content. The default value is null.

    Examples
    <SfAccordion>
        <AccordionItems>
            <AccordionItem Header="C Sharp(C#)">
                <ContentTemplate>
                    <div class="content-text">C# is intended to be a simple, modern, general-purpose, object-oriented programming language. Its development team is led by Anders Hejlsberg. The most recent version is C# 5.0, which was released on August 15, 2012.</div>
                </ContentTemplate>     
            </AccordionItem>
        </AccordionItems>
    </SfAccordion>

    CssClass

    Gets or sets the classes for accordion item to customize the accordion header and content.

    Declaration
    public string CssClass { get; set; }
    Property Value
    Type Description
    System.String

    If we set the css class, then the custom class is applied for accordion item. The default value is null.

    Examples
     
    <SfAccordion>
        <AccordionItems>
            <AccordionItem CssClass="item1">
                <HeaderTemplate>
                    Margeret Peacock
                </HeaderTemplate>
                <ContentTemplate>
                    Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services.
                </ContentTemplate>
            </AccordionItem>
        </AccordionItems>
    </SfAccordion>

    Disabled

    Gets or sets whether the accordion panel is disabled or not.

    Declaration
    public bool Disabled { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, to disable the accordion panel. The default value is false.

    Expanded

    Gets or sets a value that indicates whether the accordion panel is expanded or not.

    Declaration
    public bool Expanded { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, to expand the accordion panel. The default value is false.

    ExpandedChanged

    Gets or sets a callback when Expanded property changed.

    Declaration
    public EventCallback<bool> ExpandedChanged { get; set; }
    Property Value
    Type
    Microsoft.AspNetCore.Components.EventCallback<System.Boolean>

    Header

    Gets or sets the header text to be displayed for accordion item.

    Declaration
    public string Header { get; set; }
    Property Value
    Type Description
    System.String

    Accepts a string value. The default value is null.

    HeaderTemplate

    Gets or sets template as Microsoft.AspNetCore.Components.RenderFragment, that defines custom appearance of accordion header.

    Declaration
    public RenderFragment HeaderTemplate { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.RenderFragment

    A template content that specifies the visualization of accordion header. The default value is null.

    Examples
    <SfAccordion>
        <AccordionItems>
            <AccordionItem Content="C# is intended to be a simple, modern, general-purpose, object-oriented programming language. Its development team is led by Anders Hejlsberg. The most recent version is C# 5.0, which was released on August 15, 2012.">
                <HeaderTemplate>
                    <div class="header-text">C Sharp(C#)</div>
                </HeaderTemplate>
            </AccordionItem>
        </AccordionItems>
    </SfAccordion>

    IconCss

    Gets or sets a CSS class string to include an icon or image for accordion header.

    Declaration
    public string IconCss { get; set; }
    Property Value
    Type Description
    System.String

    Accepts a CSS class string separated by space to include an icon or image for the accordion item. The default value is null.

    Remarks

    This property value is only applied for accordion header.

    Examples
    <SfAccordion>
        <AccordionItems>
            <AccordionItem  IconCss="e-icons e-home" Content="Home icon rendered in header"></AccordionItem>
        </AccordionItems>
    </SfAccordion>

    Id

    Gets or sets the unique ID for accordion item.

    Declaration
    public string Id { get; set; }
    Property Value
    Type Description
    System.String

    Accepts a string value. The default value is null.

    Visible

    Gets or sets whether the accordion panel is hidden or not.

    Declaration
    public bool Visible { get; set; }
    Property Value
    Type Description
    System.Boolean

    false, to hide the accordion panel. The default value is true.

    Methods

    BuildRenderTree(RenderTreeBuilder)

    Declaration
    protected override void BuildRenderTree(RenderTreeBuilder __builder)
    Parameters
    Type Name Description
    Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

    Dispose(Boolean)

    Dispose unmanaged resources in the Syncfusion Blazor component.

    Declaration
    protected override void Dispose(bool disposing)
    Parameters
    Type Name Description
    System.Boolean disposing

    Boolean value to dispose the object.

    OnInitializedAsync()

    Method invoked when the component is ready to start.

    Declaration
    protected override Task OnInitializedAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    A System.Threading.Tasks.Task representing any asynchronous operation.

    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved