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.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 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.

Constructors

Constructor

TextBlock

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 class.

Parameters

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

Constructor

TextBlock

public TextBlock(string text)

Initializes a new instance of the class.

Parameters

text: The text.

Properties

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

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.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 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.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 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

TextBlock

Constructors

TextBlock

Parameters

TextBlock

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

Referenced by