DxLoadingPanel.IndicatorTemplate Property
Specifies custom content for the indicator.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
#Declaration
[Parameter]
public RenderFragment IndicatorTemplate { get; set; }
#Property Value
Type | Description |
---|---|
Render |
The content markup. |
#Remarks
Use the <IndicatorTemplate>
tag to customize the content of an indicator. In this case, you can specify the Loading Panel’s target content as follows:
- Use the ChildContent render fragment.
- Use the PositionTarget property.
- Add the LoadingPanel to the page without additional parameters.
In the following example, the default indicator is replaced with a custom icon:
<DxLoadingPanel Visible="true"
ApplyBackgroundShading="true"
CssClass="w-100">
<IndicatorTemplate>
<div class="indicator-icon" role="img"></div>
</IndicatorTemplate>
<ChildContent>
<DxMemo @bind-Text="@Text"
Rows="10" />
</ChildContent>
</DxLoadingPanel>
Note
Since Child
contains nested markup of its parent class, the template content must conform to HTML semantics.
To improve performance, your custom icon’s size should match the default indicator’s size defined by the SizeMode property value:
24x24
for theSmall
size32x32
for theMedium
size40x40
for theLarge
size
If your custom icon’s size is smaller than the default indicator’s, wrap the icon with a <div>
container with the corresponding size.
<DxLoadingPanel Visible="true" Text="Custom Loading...">
<IndicatorTemplate>
<div style="width: 32px; height: 32px; display: flex; align-items: center;
justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
version="1.1" viewBox="0 0 64 64">
@* ... *@
</svg>
</div>
</IndicatorTemplate>
</DxLoadingPanel>