menu

Blazor

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

    Show / Hide Table of Contents

    Class SfAccordion

    Accordion is a vertically collapsible panel that displays one or more panels at a time.

    Inheritance
    System.Object
    SfBaseComponent
    SfAccordion
    Inherited Members
    SfBaseComponent.Dispose()
    SfBaseComponent.Dispose(Boolean)
    SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)
    Namespace: Syncfusion.Blazor.Navigations
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class SfAccordion : SfBaseComponent
    Remarks

    Accordion items can be populated by specifying AccordionItem within AccordionItems tag directive.

    Examples

    In the below code example, a basic accordion component initialized with AccordionItems 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

    SfAccordion()

    Declaration
    public SfAccordion()

    Properties

    ChildContent

    Gets or sets the child content of accordion component.

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

    Accepts a RenderFragment that defines the content of the accordion element.

    EnablePersistence

    Gets or sets whether to persist component's state between page reloads. When set to true, the ExpandedIndices property is persisted.

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

    true, if the component's state persistence is enabled. The default value is false.

    Remarks

    Component's ExpandedIndices property will be stored in browser local storage to persist component's state when page reloads. It is mandatory to provide ID to persist ExpandedIndices property.

    EnableRtl

    Gets or sets whether the right to left direction is enabled for accordion component.

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

    true, the right to left direction is enabled for accordion component. The default value is false.

    ExpandedIndices

    Gets or sets the index of items that is expanded on the initial load.

    Declaration
    public int[] ExpandedIndices { get; set; }
    Property Value
    Type Description
    System.Int32[]

    If we set the index value, then specified index items were expanded otherwise the default null value is set.

    Examples
     
    <SfAccordion @bind-ExpandedIndices="@ExpandedIndices">
        <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>
    @code{
        int[] ExpandedIndices = new int[] { 0, 1 };
    }

    ExpandedIndicesChanged

    Invokes when index of expanded items were changed.

    Declaration
    public EventCallback<int[]> ExpandedIndicesChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<System.Int32[]>

    Fired when expanded item index changes.

    ExpandMode

    Gets or sets a value that indicates options to expand a single or multiple panels at a time.

    Declaration
    public ExpandMode ExpandMode { get; set; }
    Property Value
    Type Description
    ExpandMode

    One of the ExpandMode enumeration. The default value is Multiple

    Remarks

    If the ExpandMode is Single, only one AccordionItem will expand at a time. If the ExpandMode is Multiple, more than one AccordionItem will expand at a time.

    Height

    Gets or sets the height of the accordion element in pixels/number/percentage.

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

    If we set the height value, then the accordion will render based on specified height otherwise the default height value auto is set.

    Remarks

    If we set number values, then it is considered as pixels.

    Examples
     
    <SfAccordion Height="500px"></SfAccordion> 

    HtmlAttributes

    Gets or sets a collection of additional attributes that will applied to the accordion element.

    Declaration
    public Dictionary<string, object> HtmlAttributes { get; set; }
    Property Value
    Type Description
    System.Collections.Generic.Dictionary<System.String, System.Object>

    It allows the accordion component to render non-declared attributes. The default value is null.

    Remarks

    Additional attributes can be added by specifying as in-line attributes or by specifying @attributes directive.

    Examples
     
    <SfAccordion name="accordion"></SfAccordion>

    ID

    Gets or sets the unique Id value for accordion component.

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

    If we set the id, then the id value set for accordion element. The default value is null.

    Items

    Gets or sets the list of accordion items that will be populated using the AccordionItems tag directive.

    Declaration
    public List<AccordionItem> Items { get; set; }
    Property Value
    Type Description
    System.Collections.Generic.List<AccordionItem>

    AccordionItems

    LoadOnDemand

    Gets or sets whether to render all the accordion content on initial load or not.

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

    If we set false, then all the contents are rendered on initial load, The default value is true.

    Width

    Gets or sets the width of the accordion element in pixels/number/percentage.

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

    If we set the width value, then the accordion will render based on specified width otherwise the default width value 100% is set.

    Remarks

    If we set number values, then it is considered as pixels.

    Examples
    <SfAccordion Width="500px"></SfAccordion>

    Methods

    BuildRenderTree(RenderTreeBuilder)

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

    OnAfterRenderAsync(Boolean)

    Method invoked after each time the component has been rendered.

    Declaration
    protected override Task OnAfterRenderAsync(bool firstRender)
    Parameters
    Type Name Description
    System.Boolean firstRender

    Set to true for the first time component rendering; otherwise gets false.

    Returns
    Type Description
    System.Threading.Tasks.Task

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

    Overrides
    SfBaseComponent.OnAfterRenderAsync(Boolean)

    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.

    Overrides
    SfBaseComponent.OnInitializedAsync()

    OnParametersSetAsync()

    Method invoked when the component has received parameters from its parent in the render tree, and the incoming values have been assigned to properties.

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

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

    PreventRender(Boolean)

    Prevents the Accordion render. This method will internally sets value to be returned from ShouldRender method.

    Declaration
    public void PreventRender(bool preventRender = true)
    Parameters
    Type Name Description
    System.Boolean preventRender

    Default value is true. Toggles the ShouldRender method value.

    SelectAsync(Int32)

    Sets focus to the specified index item header in Accordion.

    Declaration
    public Task SelectAsync(int index)
    Parameters
    Type Name Description
    System.Int32 index

    Number value that determines which item should be focused.

    Returns
    Type Description
    System.Threading.Tasks.Task

    System.Threading.Tasks.Task.

    ShouldRender()

    Declaration
    protected override bool ShouldRender()
    Returns
    Type
    System.Boolean
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved