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