ExpansionPanel Templates
The Telerik ExpansionPanel component for Blazor exposes templates for more flexible content customization. This article lists the available templates and describes how to use them.
When using ExpansionPanel templates, wrap the component content in a <Content> child tag. Othewise, the <Content> tag is optional and you can insert the ExpansionPanel content directly between the opening and closing TelerikExpansionPanel tags.
TitleTemplate
The ExpansionPanel TitleTemplate renders at the place of the plain-text title.
Do not use Title and TitleTemplate at the same time. If the app defines both, the ExpansionPanel will use the TitleTemplate.
Using ExpansionPanel TitleTemplate
<TelerikExpansionPanel>
<TitleTemplate>
Expansion Panel Title Template
</TitleTemplate>
<Content>
Expansion Panel Content
</Content>
</TelerikTaskBoard>Also see the runnable example below.
SubTitleTemplate
The ExpansionPanel SubTitleTemplate renders at the place of the plain-text sub-title.
Do not use SubTitle and SubTitleTemplate at the same time. If the app defines both, the ExpansionPanel will use the SubTitleTemplate.
Using ExpansionPanel SubTitleTemplate
<TelerikExpansionPanel>
<SubTitleTemplate>
Expansion Panel SubTitle Template
</SubTitleTemplate>
<Content>
Expansion Panel Content
</Content>
</TelerikTaskBoard>Example
Using ExpansionPanel templates
<TelerikExpansionPanel @bind-Expanded="@ExpansionPanelExpanded">
<TitleTemplate>
<TelerikSvgIcon Icon="@SvgIcon.InfoCircle" />
<span style="color: var(--kendo-color-primary)"><strong>Title</strong> Template</span>
</TitleTemplate>
<SubTitleTemplate>
<strong>Sub Title</strong> Template
</SubTitleTemplate>
<Content>
Expansion Panel Content
</Content>
</TelerikExpansionPanel>
@code {
private bool ExpansionPanelExpanded { get; set; } = true;
}