Tesserae - Text Breadcrumbs

TextBreadcrumbs

Description

The TextBreadcrumbs component is used as a navigational container that aggregates multiple TextBreadcrumb components. It displays a series of navigational links (breadcrumbs) that help users understand their current location within a hierarchical structure. Use this component when you want to provide users with one-click access to higher levels in your app's navigation hierarchy.

Usage

Instantiate TextBreadcrumbs using the static helper method from Tesserae.UI. Chain the Items() method to add individual TextBreadcrumb elements. The component supports method chaining and fluent interface conventions.

text-breadcrumbs-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 BreadcrumbsExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class BreadcrumbsExample : IComponent
    {
        public HTMLElement Render()
        {
            // A simple message element to display selected breadcrumb text
            var message = TextBlock("Selected: nothing");

            // Create a TextBreadcrumbs container and add several breadcrumbs
            var breadcrumbs = TextBreadcrumbs()
                .Items(
                    TextBreadcrumb("Home").OnClick((s, e) => message.Text = "Selected: Home"),
                    TextBreadcrumb("Products").OnClick((s, e) => message.Text = "Selected: Products"),
                    TextBreadcrumb("Electronics").OnClick((s, e) => message.Text = "Selected: Electronics")
                );

            return Stack().Children(message, breadcrumbs).Render();
        }
    }
}

API reference

class

TextBreadcrumb

public class TextBreadcrumb : ComponentBase<TextBreadcrumb, HTMLSpanElement>

Represents an item in a component.

Constructors

Constructor

TextBreadcrumb

public TextBreadcrumb(string text)

Initializes a new instance of the class.

Parameters

text: The breadcrumb text.

Methods

Method

TextBreadcrumb.Render

public override HTMLElement Render()

Renders the component.

Returns

The rendered HTML element.

class

TextBreadcrumbs

public class TextBreadcrumbs : IComponent, IContainer<TextBreadcrumbs, TextBreadcrumb>, ITextFormating, IHasForegroundColor

A breadcrumb component that displays a path as a sequence of text links.

Constructors

Constructor

TextBreadcrumbs

public TextBreadcrumbs()

Initializes a new instance of the class.

Properties

Property

TextBreadcrumbs.Size

public virtual TextSize Size { get ; set ; }

Gets or sets the text size.

Property

TextBreadcrumbs.Weight

public virtual TextWeight Weight { get ; set ; }

Gets or sets the text weight.

Property

TextBreadcrumbs.TextAlign

public TextAlign TextAlign { get ; set ; }

Gets or sets the text alignment.

Property

TextBreadcrumbs.Foreground

public string Foreground { get ; set ; }

Gets or sets the foreground color.

Methods

Method

TextBreadcrumbs.Clear

public void Clear()

Clears all breadcrumbs.

Method

TextBreadcrumbs.Replace

public void Replace(TextBreadcrumb newComponent, TextBreadcrumb oldComponent)

Replaces a breadcrumb.

Parameters

newComponent: The new breadcrumb.
oldComponent: The old breadcrumb.

Method

TextBreadcrumbs.Add

public void Add(TextBreadcrumb component)

Adds a breadcrumb.

Parameters

component: The breadcrumb to add.

Method

TextBreadcrumbs.Items

public TextBreadcrumbs Items(params TextBreadcrumb[] children)

Adds multiple breadcrumbs.

Parameters

children: The breadcrumbs to add.

Returns

The current instance.

Method

TextBreadcrumbs.Render

public HTMLElement Render()

Renders the component.

Returns

The rendered HTML element.

Samples

Basic Breadcrumbs Usage

This sample demonstrates how to create a TextBreadcrumbs container with a series of TextBreadcrumbs items. Each TextBreadcrumb fires an event on click that can be used to update UI or perform custom logic.

text-breadcrumbs-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 BasicBreadcrumbsSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class BasicBreadcrumbsSample : IComponent
    {
        public HTMLElement Render()
        {
            var msg = TextBlock("Selected: none");

            // Create a breadcrumbs container with several breadcrumb items.
            var breadcrumbs = TextBreadcrumbs()
                .MaxWidth(100.percent())
                .PaddingTop(16.px())
                .PB(16)
                .Items(
                    TextBreadcrumb("Home").OnClick((s, e) => msg.Text = "Home"),
                    TextBreadcrumb("About").OnClick((s, e) => msg.Text = "About"),
                    TextBreadcrumb("Contact").OnClick((s, e) => msg.Text = "Contact")
                );

            return Stack().Children(msg, breadcrumbs).Render();
        }
    }
}

TextBreadcrumbs

Description

Usage

API reference

Constructors

TextBreadcrumb

Parameters

Methods

TextBreadcrumb.Render

Returns

Constructors

TextBreadcrumbs

Properties

TextBreadcrumbs.Size

TextBreadcrumbs.Weight

TextBreadcrumbs.TextAlign

TextBreadcrumbs.Foreground

Methods

TextBreadcrumbs.Clear

TextBreadcrumbs.Replace

Parameters

TextBreadcrumbs.Add

Parameters

TextBreadcrumbs.Items

Parameters

Returns

TextBreadcrumbs.Render

Returns

Samples

Basic Breadcrumbs Usage

See also