DxCheckBox<T>.ChildContent Property

Specifies CheckBox custom content.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[Parameter]
public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
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:

razor

<DxCheckBox @bind-Checked="@Value"
            AllowIndeterminateStateByClick="true"
            DisableDefaultRender>
    <ChildContent>
        <div class="template-container">
            <div class="boxLabel">
                Medium
            </div>
            <div class="d-flex border-top-0">
                <div class="boxLabel">
                    Low
                </div>
                <div class="flexBox checkBox">
                    <div class="borderContainer">
                        <div class="gradientCircle" />
                        <div class="markerContainer">
                            <div class="roundMarkerHigh" />
                        </div>
                        <div class="markerContainer rotation-90">
                            <div class="roundMarkerMedium" />
                        </div>
                        <div class="markerContainer rotation-180">
                            <div class="roundMarkerLow" />
                        </div>
                        <div class="flexBox @($"rotation-{Angle}") rotation-animated w-100">
                            <div class="light" />
                        </div>
                        <div class="centerCircle" />
                        <div class="markerContainer @($"rotation-{Angle}") rotation-animated">
                            <div class="marker" />
                        </div>
                    </div>
                    <div class="borderCyrcle" />
                </div>
                <div class="boxLabel">
                    High
                </div>
            </div>
        </div>
    </ChildContent>
</DxCheckBox>

@code {
    bool? Value { get; set; } = true;
    int Angle { get { return Value == true ? 0 : Value == false ? 90 : 180; } }
}

Note

Since ChildContent contains nested markup of its parent class, the template content must conform to HTML semantics.

You can omit the <ChildContent> tag and specify the markup directly in the <DxCheckBox> tag:

razor

<DxCheckBox @bind-Checked="@Value"
            AllowIndeterminateStateByClick="true"
            DisableDefaultRender="true">
    <div class="template-container">
        <div class="boxLabel">
            Medium
        </div>
        <div class="d-flex border-top-0">
            <div class="boxLabel">
                Low
            </div>
            <div class="flexBox checkBox">
                <div class="borderContainer">
                    <div class="gradientCircle" />
                    <div class="markerContainer">
                        <div class="roundMarkerHigh" />
                    </div>
                    <div class="markerContainer rotation-90">
                        <div class="roundMarkerMedium" />
                    </div>
                    <div class="markerContainer rotation-180">
                        <div class="roundMarkerLow" />
                    </div>
                    <div class="flexBox @($"rotation-{Angle}") rotation-animated w-100">
                        <div class="light" />
                    </div>
                    <div class="centerCircle" />
                    <div class="markerContainer @($"rotation-{Angle}") rotation-animated">
                        <div class="marker" />
                    </div>
                </div>
                <div class="borderCyrcle" />
            </div>
            <div class="boxLabel">
                High
            </div>
        </div>
    </div>
</DxCheckBox>

@code {
    bool? Value { get; set; } = false;
    int Angle { get { return Value == true ? 0 : Value == false ? 180 : 90; } }
}

Run Demo: Customize Layout