Tesserae - Label

Label

Description

The Label component is used to provide a descriptive title or identifier for a UI element or group of elements. It is typically paired with input controls or other interactive components to inform users of their purpose. Being part of the Components group, this control offers various styling options such as inline display, auto-width based on content, and visual distinction for required fields.

Usage

The Label component is instantiated through the static helper method in the Tesserae.UI class. You can simply call Label() with either a text string or an IComponent (for a more complex inner content). Here’s an example of creating a basic label:

label-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new Example();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class Example : IComponent
    {
        public HTMLElement Render()
        {
            // Create a simple label with text.
            var label = Label("Username");
            return label.Render();
        }
    }
}

API reference

class

Label

public sealed class Label : TextBlock, ISpecialCaseStyling, IRoundedStyle

A non-interactive label component, typically used to caption form fields.

Constructors

Constructor

Label

public Label(string text = string.Empty)

Initializes a new instance of this class.

Constructor

Label

public Label(IComponent component)

Initializes a new instance of this class.

Properties

Property

Label.IsRequired

public override bool IsRequired { get ; set ; }

Gets or sets a value indicating whether the component is required for form submission.

Property

Label.IsInline

public bool IsInline { get ; set ; }

Returns a value indicating whether the component is inline.

Property

Label.Content

public IComponent Content { set ; }

Sets the content rendered inside the surface.

Methods

Method

Label.SetContent

public Label SetContent(IComponent content)

Sets the content of the component.

Method

Label.Inline

public Label Inline()

Renders the component inline.

Method

Label.SetMinLabelWidth

public Label SetMinLabelWidth(UnitSize unitSize)

Sets the min label width of the component.

Method

Label.WithContentMargin

public Label WithContentMargin()

Returns the component configured with the given content margin.

Method

Label.AlignLabelTop

public Label AlignLabelTop()

Aligns the label to the top of its container.

Method

Label.AutoWidth

public Label AutoWidth(string parentSelector = null, bool alignRight = false)

Computes the label width automatically from its sibling components so labels in a column line up.

Method

Label.AutoWidth

public Label AutoWidth(IComponent parentElement, bool alignRight = false)

Computes the label width automatically from its sibling components so labels in a column line up.

Samples

Label Variants

The sample below demonstrates different usages of the Label component—simple text labels, disabled labels, and required labels—as well as labels with different styles (primary, secondary, tiny) and inline configurations with or without auto-width.

label-2-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = Stack().Children(
                // Simple label with text
                Label("I'm Label"),
                // Disabled label
                Label("I'm a disabled Label").Disabled(),
                // Required label
                Label("I'm a required Label").Required(),
                // Primary and secondary styled labels
                Label("I'm a primary Label").Primary(),
                Label("I'm a secondary Label").Secondary(),
                // Tiny label
                Label("I'm a tiny Label").Regular().Tiny(),
                // Label paired with a TextBox control
                Label("A Label for An Input").SetContent(TextBox()),
                // Inline labels without auto-width adjustment
                TextBlock("Inline without auto-width").Medium().PaddingTop(16.px()).PaddingBottom(8.px()),
                Stack().Children(
                    Label("Lbl").Inline().SetContent(TextBox()),
                    Label("Label").Inline().SetContent(TextBox()),
                    Label("Bigger Label").Inline().SetContent(TextBox()),
                    Label("The Biggest Label").Inline().SetContent(TextBox())
                ),
                // Inline labels with auto-width adjustment
                TextBlock("Inline with auto-width").Medium().PaddingTop(16.px()).PaddingBottom(8.px()),
                Stack().Children(
                    Label("Lbl").Inline().AutoWidth().SetContent(TextBox()),
                    Label("Label").Inline().AutoWidth().SetContent(TextBox()),
                    Label("Bigger Label").Inline().AutoWidth().SetContent(TextBox()),
                    Label("The Biggest Label").Inline().AutoWidth().SetContent(TextBox())
                ),
                // Inline labels with auto-width and right alignment
                TextBlock("Inline with auto-width, aligned right").Medium().PaddingTop(16.px()).PaddingBottom(8.px()),
                Stack().Children(
                    Label("Lbl").Inline().AutoWidth(alignRight: true).SetContent(TextBox()),
                    Label("Label").Inline().AutoWidth(alignRight: true).SetContent(TextBox()),
                    Label("Bigger Label").Inline().AutoWidth(alignRight: true).SetContent(TextBox()),
                    Label("The Biggest Label").Inline().AutoWidth(alignRight: true).SetContent(TextBox())
                )
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Label

Description

Usage

API reference

Label

Constructors

Label

Label

Properties

Label.IsRequired

Label.IsInline

Label.Content

Methods

Label.SetContent

Label.Inline

Label.SetMinLabelWidth

Label.WithContentMargin

Label.AlignLabelTop

Label.AutoWidth

Label.AutoWidth

Samples

Label Variants

See also

Referenced by