Tesserae - Text Block

TextBlock

Description

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.

Usage

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:

text-block-sample.cs

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 sample = new Example();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sample);
        }
    }

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

API reference

class

TextBlock

public class TextBlock : ComponentBase<TextBlock, HTMLElement>, ITextFormating, IHasBackgroundColor, IHasForegroundColor, ICanWrap, IRoundedStyle

A text block component.

Namespace: Tesserae
Inheritance: ComponentBase<TextBlock, HTMLElement> → TextBlock
Implements: ITextFormating, IHasBackgroundColor, IHasForegroundColor, ICanWrap, IRoundedStyle

Constructors

Name	Description
TextBlock	Initializes a new instance of the `TextBlock` class.

Constructor

TextBlock

Overload
TextBlock(string, bool, bool, TextSize, TextWeight, string)	Initializes a new instance of the `TextBlock` class.
TextBlock(string)	Initializes a new instance of the `TextBlock` class.

TextBlock(string, bool, bool, TextSize, TextWeight, string)

public TextBlock(string text = string.Empty, bool treatAsHTML = false, bool selectable = false, TextSize textSize = TextSize.Small, TextWeight textWeight = TextWeight.Regular, string afterText = null)

Initializes a new instance of the TextBlock class.

Parameters

text string: The text.
treatAsHTML bool: Whether to treat the text as HTML.
selectable bool: Whether the text is selectable.
textSize TextSize: The text size.
textWeight TextWeight: The text weight.
afterText string: Optional text to append.

TextBlock(string)

public TextBlock(string text)

Initializes a new instance of the TextBlock class.

Parameters

text string: The text.

Properties

Name	Description
Background	Gets or sets the background color.
Foreground	Gets or sets the foreground color.
IsEnabled	Gets or sets whether the component is enabled.
IsSelectable	Gets or sets whether the text is selectable.
Text	Gets or sets the text.
HTML	Gets or sets the HTML content.
Title	Gets or sets the title.
Size	Gets or sets the text size.
Weight	Gets or sets the text weight.
TextAlign	Gets or sets the text alignment.
IsPrimary	Gets or sets whether the text is primary color.
IsSecondary	Gets or sets whether the text is secondary color.
IsSuccess	Gets or sets whether the text is success color.
IsDanger	Gets or sets whether the text is danger color.
IsInvalid	Gets or sets whether the text is invalid color.
IsRequired	Gets or sets whether the text block represents a required field.
CanWrap	Gets or sets whether the text can wrap.
EnableEllipsis	Gets or sets whether to enable ellipsis for overflowing text.
EnableBreakSpaces	Gets or sets whether to enable break-spaces.
Cursor	Gets or sets the cursor.

Property

TextBlock.Background

public string Background { get ; set ; }

Gets or sets the background color.

Property

TextBlock.Foreground

public string Foreground { get ; set ; }

Gets or sets the foreground color.

Property

TextBlock.IsEnabled

public bool IsEnabled { get ; set ; }

Gets or sets whether the component is enabled.

Property

TextBlock.IsSelectable

public bool IsSelectable { get ; set ; }

Gets or sets whether the text is selectable.

Property

TextBlock.Text

public string Text { get ; set ; }

Gets or sets the text.

Property

TextBlock.HTML

public string HTML { get ; set ; }

Gets or sets the HTML content.

Property

TextBlock.Title

public string Title { get ; set ; }

Gets or sets the title.

Property

TextBlock.Size

public TextSize Size { get ; set ; }

Gets or sets the text size.

Property

TextBlock.Weight

public TextWeight Weight { get ; set ; }

Gets or sets the text weight.

Property

TextBlock.TextAlign

public TextAlign TextAlign { get ; set ; }

Gets or sets the text alignment.

Property

TextBlock.IsPrimary

public bool IsPrimary { get ; set ; }

Gets or sets whether the text is primary color.

Property

TextBlock.IsSecondary

public bool IsSecondary { get ; set ; }

Gets or sets whether the text is secondary color.

Property

TextBlock.IsSuccess

public bool IsSuccess { get ; set ; }

Gets or sets whether the text is success color.

Property

TextBlock.IsDanger

public bool IsDanger { get ; set ; }

Gets or sets whether the text is danger color.

Property

TextBlock.IsInvalid

public bool IsInvalid { get ; set ; }

Gets or sets whether the text is invalid color.

Property

TextBlock.IsRequired

public virtual bool IsRequired { get ; set ; }

Gets or sets whether the text block represents a required field.

Property

TextBlock.CanWrap

public bool CanWrap { get ; set ; }

Gets or sets whether the text can wrap.

Property

TextBlock.EnableEllipsis

public bool EnableEllipsis { get ; set ; }

Gets or sets whether to enable ellipsis for overflowing text.

Property

TextBlock.EnableBreakSpaces

public bool EnableBreakSpaces { get ; set ; }

Gets or sets whether to enable break-spaces.

Property

TextBlock.Cursor

public string Cursor { get ; set ; }

Gets or sets the cursor.

Methods

Name	Description
Render	Renders the component.

Method

TextBlock.Render

public override HTMLElement Render()

Renders the component.

Returns

The rendered HTML element.

Samples

Basic Text Display

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

text-block-2-sample.cs

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 sample = new BasicTextSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sample);
        }
    }

    public class BasicTextSample : IComponent
    {
        public HTMLElement Render()
        {
            return TextBlock("Hello, Tesserae!").Medium().Render();
        }
    }
}

Advanced Text Formatting

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.

text-block-3-sample.cs

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 sample = new AdvancedTextSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sample);
        }
    }

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

TextBlock

Description

Usage

API reference

Constructors

TextBlock

TextBlock(string, bool, bool, TextSize, TextWeight, string)

Parameters

TextBlock(string)

Parameters

Properties

TextBlock.Background

TextBlock.Foreground

TextBlock.IsEnabled

TextBlock.IsSelectable

TextBlock.Text

TextBlock.HTML

TextBlock.Title

TextBlock.Size

TextBlock.Weight

TextBlock.TextAlign

TextBlock.IsPrimary

TextBlock.IsSecondary

TextBlock.IsSuccess

TextBlock.IsDanger

TextBlock.IsInvalid

TextBlock.IsRequired

TextBlock.CanWrap

TextBlock.EnableEllipsis

TextBlock.EnableBreakSpaces

TextBlock.Cursor

Methods

TextBlock.Render

Returns

Samples

Basic Text Display

Advanced Text Formatting

See also