Tesserae

HorizontalSeparator

Description

The HorizontalSeparator component is used to visually separate content into distinct groups with a horizontal rule. It can display text or custom content (such as an icon combined with text) within the separator. By default, the content is center-aligned, but you can adjust the alignment to Left or Right. This component is ideal for breaking up sections within a UI and enhancing visual organization.

Usage

Instantiate a HorizontalSeparator using the Tesserae.UI helper method. You can provide a string as default text or pass a custom component as its content. Additionally, use method chaining to control alignment and styling.

horizontal-separator-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 MySeparatorSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class MySeparatorSample : IComponent
    {
        public HTMLElement Render()
        {
            // Create a center-aligned HorizontalSeparator with text.
            var separatorCenter = HorizontalSeparator("Center");

            // Create a left-aligned separator.
            var separatorLeft = HorizontalSeparator("Left").Left();

            // Create a right-aligned separator.
            var separatorRight = HorizontalSeparator("Right").Right();

            // Create a custom separator using a stack with an icon and text.
            var customContent = HStack().Children(
                Icon(UIcons.Plane).AlignCenter().PaddingRight(8.px()),
                TextBlock("Custom Center").SemiBold().MediumPlus().AlignCenter()
            );
            var customSeparator = HorizontalSeparator(customContent).Primary();

            return Stack().Children(separatorCenter, separatorLeft, separatorRight, customSeparator).Render();
        }
    }
}

Methods

HorizontalSeparator SetContent(IComponent component)
Replaces the current content with a custom component.
• component: The custom component to display within the separator.
HorizontalSeparator Primary()
Applies the primary styling to the separator (e.g., primary color or emphasis).
HorizontalSeparator SetText(string text)
Sets the separator's text content.
• text: The text to display.
HorizontalSeparator Left()
Aligns the content of the separator to the left side.
HorizontalSeparator Center()
Aligns the content to the center (default).
HorizontalSeparator Right()
Aligns the content to the right side.
HTMLElement Render()
Renders the component to an HTMLElement for display.

Properties

Align Alignment
Gets or sets the alignment for the separator's content.
Possible values: Align.Left, Align.Center, Align.Right.
string Text
Gets or sets the text content of the separator. Changing this value updates the displayed text.
string Background
Gets or sets the CSS background style of the separator element.

Samples

Basic Separators

The following sample demonstrates creating horizontal separators with various alignments and both text and custom content.

horizontal-separator-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 sampleComponent = new HorizontalSeparatorDemo();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class HorizontalSeparatorDemo : IComponent
    {
        public HTMLElement Render()
        {
            // Create a center-aligned separator with text "Center".
            var centerSeparator = HorizontalSeparator("Center");

            // Create a left-aligned separator with text "Left".
            var leftSeparator = HorizontalSeparator("Left").Left();

            // Create a right-aligned separator with text "Right".
            var rightSeparator = HorizontalSeparator("Right").Right();

            // Create a custom separator with an icon and styled text, and apply primary style.
            var customContent = HStack().Children(
                Icon(UIcons.Plane).AlignCenter().PaddingRight(8.px()),
                TextBlock("Custom Center").SemiBold().MediumPlus().AlignCenter()
            );
            var customSeparator = HorizontalSeparator(customContent).Primary();

            // Stack all separators vertically.
            return Stack().Children(centerSeparator, leftSeparator, rightSeparator, customSeparator).Render();
        }
    }
}

Referenced by

icon