Tesserae

Tree

Description

A component that displays a hierarchical list

A tree displays hierarchical data. Nodes can be expanded or collapsed to reveal nested data.

Supports synchronous and asynchronous loading of child nodes.

Samples

Basic Synchronous Tree

tree-sample.js

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 component = new Tree().Items(
                new Tree.Item("samples/ConsoleApp...", UIcons.Folder.ToString()).Expanded().Items(
                    new Tree.Item("ConsoleApp1.csproj", UIcons.File.ToString()).Selected(),
                    new Tree.Item("Program.cs", UIcons.File.ToString())
                ),
                new Tree.Item("src", UIcons.Folder.ToString()).Expanded().Items(
                    new Tree.Item("MarkdownRende...", UIcons.Folder.ToString()).Expanded().Items(
                        new Tree.Item("MarkdownConve...", UIcons.File.ToString()),
                        new Tree.Item("Slides", UIcons.Folder.ToString()).Expanded().Items(
                            new Tree.Item("Blocks", UIcons.Folder.ToString()).Expanded().Items(
                                new Tree.Item("HeadingRe...", UIcons.File.ToString()),
                                new Tree.Item("HeadingRe...", UIcons.File.ToString())
                            ),
                            new Tree.Item("SlideDocume...", UIcons.File.ToString())
                        )
                    ),
                    new Tree.Item("MarkdownRende...", UIcons.Folder.ToString()).Expanded().Items(
                        new Tree.Item("MarkdownRende...", UIcons.File.ToString()),
                        new Tree.Item("Program.cs", UIcons.File.ToString())
                    ),
                    new Tree.Item("MarkdownRenderer...", UIcons.File.ToString())
                )
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Asynchronous Tree

tree-2-sample.js

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 component = new Tree().Items(
                new Tree.Item("Lazy Loaded Folder", UIcons.Folder.ToString()).ItemsAsync(async () =>
                {
                    await Task.Delay(1000);
                    return new[]
                    {
                        new Tree.Item("Async Child 1", UIcons.File.ToString()),
                        new Tree.Item("Async Child 2", UIcons.File.ToString())
                    };
                })
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Selectable Tree

tree-3-sample.js

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 component = new Tree().SelectionEnabled().Items(
                new Tree.Item("Root 1", UIcons.Folder.ToString()).Expanded().Items(
                    new Tree.Item("Child A", UIcons.File.ToString()),
                    new Tree.Item("Child B", UIcons.File.ToString())
                ),
                new Tree.Item("Root 2", UIcons.Folder.ToString()).Expanded().Items(
                    new Tree.Item("Child C", UIcons.File.ToString()).Selected(),
                    new Tree.Item("Child D", UIcons.File.ToString())
                )
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}