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.