Label Component

Description

This component represents a label in Blazor using the Gap.Blazor.Label model. The label is styled dynamically based on the properties of the model and supports text alignment changes.

Usage

@using Gap.Blazor.Components
@using Gap.Blazor.Extensions
@inherits WMControlComponentBase
@namespace Gap.Blazor.Components

@if (model.Visible)
{
    <WMStyleBase model=@model></WMStyleBase>
    <label class="@model.GetStringClasses() @GetAutoSizeClass()" tabindex=-1>@model.Text</label>

    <style>
        [email protected]() {
            display:flex;
            overflow: hidden;
            align-items : @this.label.TextAlign.GetAlignItemsStyle();
            justify-content : @this.label.TextAlign.GetJustifyContentStyle();
            border: @this.label.BorderStyle.ToCss();
        }
    </style>
}

Properties

  • label: Instance of the Gap.Blazor.Label model.

Methods

  • OnInitialized(): Initializes the component and subscribes to the TextAlignChanged event.

  • SubscribeToModelChanges(): Method called when the TextAlignChanged event is triggered.

Dynamic Rendering

The component dynamically renders a label based on the Label model properties:

  • WMStyleBase: Applies styles based on the model.

  • label: Displays the text of the Label model.

Styles

The styles for the label are defined within the component:

  • display: Sets the display to flex.

  • overflow: Hides overflow content.

  • align-items: Aligns items based on the TextAlign property.

  • justify-content: Justifies content based on the TextAlign property.

  • border: Sets the border style based on the BorderStyle property.

Events

  • TextAlignChanged: Event triggered when the text alignment changes.

Last updated