GroupBox Component

Description

This component represents a GroupBox in Blazor, which is used to group other components within a fieldset. The component is styled dynamically based on the properties of the GroupBox model.

Usage

@namespace Gap.Blazor.Components
@using Gap.Blazor
@using System.Collections
@using Telerik.Blazor.Components
@inherits WMControlComponentBase

@if (this.Visible)
{   
    <WMStyleBase model=@groupBox></WMStyleBase>
    <div>
        <fieldset class="@this.groupBox.GetStringClasses()">
            <legend>@this.Text</legend>
            @ChildContent
        </fieldset>
    </div>

    <style>
        fieldset {
            width: 100%;
            border: 1px LightGrey solid;
        }

        legend {
            position: absolute;
            float: none;
            transform: translateY(-50%);
            width: auto;
            margin: 0 0.3em 0 0.3em;
            padding: 0 0.3em;
            border-width: 0;
            font-size: inherit;
            background-color: inherit;
        }
        
        [email protected]() legend {
            color: @GetLegendForeColorHex() !important;
        }
    </style>
}

Properties

• groupBox: Instance of the Blazor.GroupBox model.

Methods

• GetLegendForeColorHex(): Gets the legend's ARGB fore color in hexadecimal format.

Dynamic Rendering

The component dynamically renders a fieldset with a legend based on the GroupBox model properties:

• WMStyleBase: Applies styles based on the groupBox model.

• fieldset: Container for grouping child components.

• legend: Displays the text of the GroupBox.

Styles

The styles for the fieldset and legend are defined within the component:

• fieldset: Sets the width and border style.

• legend: Positions the legend and sets its appearance.

Events

• ChildContent: Renders the child content within the fieldset.