Tesserae

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

Methods

Clear()
Clears all the child breadcrumb elements from the container.
Parameters: None.
Replace(TextBreadcrumb newComponent, TextBreadcrumb oldComponent)
Replaces an existing breadcrumb with a new one in the container.
Parameters:
- newComponent: The new TextBreadcrumb component to be added.
- oldComponent: The existing TextBreadcrumb component to be replaced.
Add(TextBreadcrumb component)
Adds a new TextBreadcrumb element to the container.
Parameters:
- component: The TextBreadcrumb to be added.
Items(params TextBreadcrumb[] children)
Adds multiple TextBreadcrumb items at once to the container.
Parameters:
- children: A variable number of TextBreadcrumb components.
Render()
Renders the HTML element of the TextBreadcrumbs container.
Parameters: None.
Returns: HTMLElement.

Properties

Size (TextSize)
Gets or sets the text size by adding or removing appropriate CSS classes.
Type: TextSize
Default: TextSize.Small
Weight (TextWeight)
Gets or sets the text weight by manipulating CSS classes.
Type: TextWeight
Default: TextWeight.Regular
TextAlign (TextAlign)
Provides text alignment settings. This property is available but not implemented in the current version.
Type: TextAlign
Foreground (string)
Gets or sets the foreground color of the breadcrumbs container by directly manipulating its style.
Type: string

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