DxCheckBox<T>.ChildContent Property

Specifies CheckBox custom content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[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:

<DxCheckBox @bind-Checked="@Value"
            AllowIndeterminateStateByClick="true"
            DisableDefaultRender>
    <ChildContent>
        <div class="table position-relative">
            <div class="boxLabel" style="margin: 10px">
                Medium
            </div>
            <div class="d-flex border-top-0">
                <div class="boxLabel" style="margin: 10px">
                    Low
                </div>
                <div class="flexBox checkBox">
                    <div class="borderContainer">
                        <div class="gradientCircle" />
                        <div class="markerContainer">
                            <div class="roundMarkerHigh" />
                        </div>
                        <div class="markerContainer" style="transform: rotate(-90deg)">
                            <div class="roundMarkerMedium" />
                        </div>
                        <div class="markerContainer" style="transform: rotate(-180deg)">
                            <div class="roundMarkerLow" />
                        </div>
                        <div class="flexBox @($"rotation-{Angle}")" style="width:100%;">
                            <div class="light" />
                        </div>
                        <div class="centerCircle" />
                        <div class="markerContainer @($"rotation-{Angle}")">
                            <div class="marker" />
                        </div>
                    </div>
                    <div class="borderCyrcle" />
                </div>
                <div class="boxLabel" style="margin: 10px">
                    High
                </div>
            </div>
        </div>
    </ChildContent>
</DxCheckBox>

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

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

<DxCheckBox @bind-Checked="@Value"
            AllowIndeterminateStateByClick="true"
            DisableDefaultRender="true">
    <div class="template-container">
        <div class="boxLabel" style="margin: 10px">
            Medium
        </div>
        <div class="d-flex border-top-0">
            <div class="boxLabel" style="margin: 10px">
                Low
            </div>
            <div class="flexBox checkBox">
                <div class="borderContainer">
                    <div class="gradientCircle" />
                    <div class="markerContainer">
                        <div class="roundMarkerHigh" />
                    </div>
                    <div class="markerContainer" style="transform: rotate(-90deg)">
                        <div class="roundMarkerMedium" />
                    </div>
                    <div class="markerContainer" style="transform: rotate(-180deg)">
                        <div class="roundMarkerLow" />
                    </div>
                    <div class="flexBox @($"rotation-{Angle}")" style="width:100%;">
                        <div class="light" />
                    </div>
                    <div class="centerCircle" />
                    <div class="markerContainer @($"rotation-{Angle}")">
                        <div class="marker" />
                    </div>
                </div>
                <div class="borderCyrcle" />
            </div>
            <div class="boxLabel" style="margin: 10px">
                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