Panel

Description

This component represents a panel container in Blazor using the Gap.Blazor.Panel model. It provides a styled container for grouping other components or content, with support for dynamic border styles, scroll behavior, and mouse interaction events.

Usage

@if (this.Visible)
{   
    <WMStyleBase model=@panel></WMStyleBase>
    <div class="@this.panel.GetStringClasses()" 
         @ref="elementRef" 
         @onmouseup="MouseUpHandler" 
         @onmousemove="MouseMoveHandler">
        @ChildContent
    </div>

    <style>
        [email protected]() {           
            border: @this.GetBorderCss();
            overflow: @this.panel.GetAutoScrollStyle();
        }
    </style>
}

Properties

• panel: Instance of the Gap.Blazor.Panel model.

• elementRef: Reference to the rendered DOM element (used for interop or focus).

• ChildContent: The content rendered inside the panel.

Methods

• OnInitialized(): Subscribes to model events:

  • BorderStyleChanged

  • AutoScrollChanged

• GetBorderCss(): Returns the CSS border style based on the model’s BorderStyle, only if the panel has a defined Width and Top position.

Dynamic Rendering

• WMStyleBase: Applies base styles from the model.

• CSS Classes: Dynamically generated using panel.GetStringClasses() and model.GetComponentClass().

• Mouse Events: @onmouseup and @onmousemove handlers are attached for interaction support.

Styles

[email protected]() {
    border: [based on BorderStyle];
    overflow: [based on AutoScroll];
}

Events

• BorderStyleChanged: Triggers UI update when the border style changes.

• AutoScrollChanged: Triggers UI update when scroll behavior changes.