# Text Block

TextBlock is a display component used to render text in a consistent and customizable manner. It is part of the Components group and is useful for presenting static or dynamic text content in your web applications. By leveraging its fluent API, you can easily adjust text size, weight, alignment, color variants, wrapping behavior, and more.

Instantiate a TextBlock using the Tesserae.UI helper method. You can pass the desired text along with optional parameters to control HTML parsing, selection, initial text size, and weight. The component supports chaining additional formatting methods, such as setting the text size (e.g., Tiny, Small, Medium, etc.) and text weight (e.g., SemiBold).

Below is a basic example:

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

public class Example
{
    public static HTMLElement Main()
    {
        return TextBlock("Hello, Tesserae!")
            .Medium()    // Set text size to medium
            .SemiBold(); // Set text weight to semi-bold
    }
}

TextBlock provides several fluent methods for text formatting. Some of the available helper methods include:

• Medium()
  • Sets the text size to medium.

• Tiny()
  • Sets the text size to tiny.

• XSmall()
  • Sets the text size to extra small.

• Small()
  • Sets the text size to small.

• SmallPlus()
  • Sets the text size to small plus.

• MediumPlus()
  • Sets the text size to medium plus.

• Large()
  • Sets the text size to large.

• XLarge()
  • Sets the text size to extra large.

• XXLarge()
  • Sets the text size to double extra large.

• Mega()
  • Sets the text size to mega.

• SemiBold()
  • Adjusts the font weight to semi-bold.

In addition to these formatting shortcuts, you can chain other methods provided by interfaces implemented by TextBlock for further customization (such as NoWrap(), etc.).

The component exposes the following public properties:

• Background (string)
  • Gets or sets the background style of the text block.

• Foreground (string)
  • Gets or sets the text (font) color.

• IsEnabled (bool)
  • Gets or sets whether the text block is enabled. Setting this to false adds a disabled style.

• IsSelectable (bool)
  • Gets or sets whether the text content is selectable by the user.

• Text (string)
  • Gets or sets the inner text of the component.

• HTML (string)
  • Gets or sets the inner HTML, allowing for HTML content within the text block.

• Title (string)
  • Gets or sets the tooltip text (title attribute) for the text block.

• Size (TextSize)
  • Gets or sets the text size. This property works in tandem with the fluent API size methods.

• Weight (TextWeight)
  • Gets or sets the text weight.

• TextAlign (TextAlign)
  • Gets or sets the text alignment (e.g., Left, Center, Right).

• IsPrimary (bool)
  • Gets or sets whether the text color variant is primary.

• IsSecondary (bool)
  • Gets or sets whether the text color variant is secondary.

• IsSuccess (bool)
  • Gets or sets whether the text color variant indicates success.

• IsDanger (bool)
  • Gets or sets whether the text color variant indicates danger.

• IsInvalid (bool)
  • Gets or sets whether the text color variant indicates invalid state.

• IsRequired (bool)
  • Gets or sets whether the text block represents a required field.

• CanWrap (bool)
  • Gets or sets whether the text is allowed to wrap.

• EnableEllipsis (bool)
  • Gets or sets whether to display an ellipsis when the text overflows its container.

• EnableBreakSpaces (bool)
  • Gets or sets whether to allow breaking of spaces within text.

• Cursor (string)
  • Gets or sets the CSS cursor style for the text block.

This sample demonstrates how to create a simple text block with default styling.

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

public class BasicTextSample
{
    public static HTMLElement Main()
    {
        return TextBlock("Hello, Tesserae!")
            .Medium();
    }
}

In this example, the TextBlock is customized with advanced styling options such as a larger text size, semi-bold weight, non-wrapping text, and a tooltip.

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

public class AdvancedTextSample
{
    public static HTMLElement Main()
    {
        return TextBlock("The quick brown fox jumps over the lazy dog.", treatAsHTML: false, selectable: true)
            .Large()
            .SemiBold()
            .NoWrap()
            .Title("Example tooltip");
    }
}

• Button
• EditableLabel