Class SfAccordion

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

Inheritance

object

ComponentBase

OwningComponentBase

SfOwningComponentBase

SfBaseComponent

SfAccordion

Implements

Inherited Members

ComponentBase.Assets

ComponentBase.AssignedRenderMode

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.OnAfterRender(bool)

ComponentBase.OnInitialized()

ComponentBase.OnParametersSet()

ComponentBase.RendererInfo

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.StateHasChanged()

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

OwningComponentBase.IsDisposed

OwningComponentBase.ScopedServices

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(bool)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(string, object, bool, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.Navigations

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfAccordion : SfBaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

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

[Parameter]
public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
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

[Parameter]
public bool EnablePersistence { get; set; }

Property Value

Type	Description
bool	`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

[Parameter]
public bool EnableRtl { get; set; }

Property Value

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

ExpandMode

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

Declaration

[Parameter]
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.

ExpandedIndices

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

Declaration

[Parameter]
public int[] ExpandedIndices { get; set; }

Property Value

Type	Description
int[]	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

[Parameter]
public EventCallback<int[]> ExpandedIndicesChanged { get; set; }

Property Value

Type	Description
EventCallback<int[]>	Fired when expanded item index changes.

Height

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

Declaration

[Parameter]
public string Height { get; set; }

Property Value

Type	Description
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>

ID

Gets or sets the unique Id value for accordion component.

Declaration

[Parameter]
public string ID { get; set; }

Property Value

Type	Description
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
List<AccordionItem>	AccordionItems

LoadOnDemand

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

Declaration

[Parameter]
public bool LoadOnDemand { get; set; }

Property Value

Type	Description
bool	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

[Parameter]
public string Width { get; set; }

Property Value

Type	Description
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
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
bool	firstRender	Set to true for the first time component rendering; otherwise gets false.

Returns

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

Overrides

SfBaseComponent.OnAfterRenderAsync(bool)

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
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
Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

ComponentBase.OnParametersSetAsync()

PreventRender(bool)

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
bool	preventRender	Default value is true. Toggles the ShouldRender method value.

SelectAsync(int)

Sets focus to the specified index item header in Accordion.

Declaration

public Task SelectAsync(int index)

Parameters

Type	Name	Description
int	index	Number value that determines which item should be focused.

Returns

Type	Description
Task	Task.

ShouldRender()

Declaration

protected override bool ShouldRender()

Returns

Type
bool

Overrides

ComponentBase.ShouldRender()

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable