DxAccordionItem.Template Property

Specifies the template used to display the Accordion item.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<IAccordionItemInfo> Template { get; set; }

Property Value

Type	Description
RenderFragment<IAccordionItemInfo>	The item template.

Remarks

This property overrides the DxAccordion.ItemTemplate property value.

The following example creates nested items of the Shapes item:

Razor

<DxAccordion>
    <Items>
        <DxAccordionItem Text="Shapes">
            <Items>
                <DxAccordionItem>
                    <Template>
                        <div class="shape-container">
                            <div class="shape circle"></div>
                            Circle
                        </div>
                        <div class="shape-container">
                            <div class="shape"></div>
                            Square
                        </div>
                    </Template>
                </DxAccordionItem>
            </Items>
        </DxAccordionItem>
        <DxAccordionItem Text="Templates" />
    </Items>
</DxAccordion>

CSS

.circle { 
    border-radius: 50%;
}
.shape {
    height: 1.5em;
    width: 1.5em;
    border: 2px solid orange;
    background-color: orange;
    margin-right: 8px;
    display: inline-block;
}
.shape-container {
    display: flex;
    margin: 8px;
}

If you want to specify custom item content or header, use the ContentTemplate or HeaderTextTemplate properties.

If you want to specify the template for all items, use the ItemTemplate.