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