DxButtonBase.ChildContent Property
Specifies Button content.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v25.1.dll
NuGet Package: DevExpress.Blazor
Declaration
[Parameter]
public RenderFragment<RenderFragment> ChildContent { get; set; }Property Value
| Type | Description |
|---|---|
| RenderFragment<RenderFragment> | Content markup. |
Remarks
The ChildContent component parameter can store custom component content that does not belong to other component’s RenderFragment properties as shown below:
<DxButton RenderStyle="ButtonRenderStyle.Info"
Click="@Like"
IconCssClass="btn-icon-like"
Text="Like">
<ChildContent>
@context
<span class="ms-1">@likes</span>
<ChildContent>
</DxButton>
@* ... *@
@code {
int likes;
void Like(MouseEventArgs args) {
likes++;
}
protected override void OnInitialized() {
likes = 1;
}
}
In this example, the Button renders custom content (like counter) next to the default content specified in the button’s properties (text and icon). Use the @context parameter to specify where the default content should be rendered.
Note
Buttons are rendered as a button HTML element. According to HTML specification a button must not contain interactive elements or elements with the tabindex attribute specified.
You can omit the <ChildContent> tag and specify the markup directly in the <DxButton> tag:
<DxButton RenderStyle="ButtonRenderStyle.Info"
Click="@Like"
IconCssClass="btn-icon btn-icon-like"
@* ... *@
Text="Like">
@context
<span class="ms-1">@likes</span>
</DxButton>
@* ... *@
@code {
int likes;
void Like(MouseEventArgs args) {
likes++;
}
protected override void OnInitialized() {
likes = 1;
}
}