# 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>
        .@model.GetComponentClass() {           
            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**

```css
.@model.GetComponentClass() {
    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.