Tesserae - Horizontal Separator

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();
        }
    }
}

API reference

class

HorizontalSeparator

public class HorizontalSeparator : IComponent, IHasBackgroundColor

A thin horizontal divider used to separate sections of a vertically stacked layout.

Constructors

Constructor

HorizontalSeparator

public HorizontalSeparator(string text = string.Empty)

Initializes a new instance of this class.

Constructor

HorizontalSeparator

public HorizontalSeparator(IComponent component)

Initializes a new instance of this class.

Properties

Property

HorizontalSeparator.Alignment

public Align Alignment { get ; set ; }

Gets or sets the alignment.

Property

HorizontalSeparator.Text

public string Text { get ; set ; }

Gets or sets the text shown in the component.

Property

HorizontalSeparator.Background

public string Background { get ; set ; }

Gets or sets the CSS background of the component.

Methods

Method

HorizontalSeparator.SetContent

public HorizontalSeparator SetContent(IComponent component)

Sets the content of the component.

Method

HorizontalSeparator.Primary

public HorizontalSeparator Primary()

Styles the component using the primary tone.

Method

HorizontalSeparator.SetText

public HorizontalSeparator SetText(string text)

Sets the text of the component.

Method

HorizontalSeparator.Render

public HTMLElement Render()

Renders the component's root HTML element.

Method

HorizontalSeparator.Left

public HorizontalSeparator Left()

Aligns the content of the component to the left.

Method

HorizontalSeparator.Center

public HorizontalSeparator Center()

Centers the content of the component.

Method

HorizontalSeparator.Right

public HorizontalSeparator Right()

Aligns the content of the component to the right.

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

HorizontalSeparator

Description

Usage

API reference

Constructors

HorizontalSeparator

HorizontalSeparator

Properties

HorizontalSeparator.Alignment

HorizontalSeparator.Text

HorizontalSeparator.Background

Methods

HorizontalSeparator.SetContent

HorizontalSeparator.Primary

HorizontalSeparator.SetText

HorizontalSeparator.Render

HorizontalSeparator.Left

HorizontalSeparator.Center

HorizontalSeparator.Right

Samples

Basic Separators

See also

Referenced by