Tesserae - Sidebar

Description

A sidebar navigation component

A fully featured Sidebar with Search, Navigation, Buttons, and Separators.

A sidebar can also shift into a second sidebar instead of being torn down and rebuilt, which is what navigating into an interface that has navigation of its own (a chat view, a project workspace) usually needs. ShiftTo(child) slides the track sideways by one full width to the child's panel, ShiftBack() returns, IsShifted / ShiftedSidebar read the state and OnShiftChanged reports it. The child renders inside the host and follows its open/closed state; the panel that ends up out of view is taken out of the tab and reading order once the transition finishes. It is one level deep, and ignored while the sidebar renders as a navbar.

SidebarSearchBox can be driven by its host: Text / SetText(...) write into the box without raising OnSearch, and Focus() puts the caret in it.

Sample

sidebar-sample.cs

using System;
using System.Collections.Generic;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sidebar = Sidebar();

            // A rounded, primary "pill" button (see .Rounded()), matching the rounded search box below.
            var newDocument = new SidebarButton("new-doc", UIcons.Plus, "New document")
                .Primary()
                .Rounded()
                .OnClick(() => Toast().Success("New document"));

            sidebar.AddHeader(newDocument);

            // A rounded search box with a keyboard shortcut chip (⌘K / Ctrl+K) that focuses it.
            var searchBox = new SidebarSearchBox("search", "Search Sidebar...")
                .Rounded()
                .SetKeyboardShortcut("Ctrl", "K");
            searchBox.OnSearch((term) => sidebar.Search(term));

            sidebar.AddHeader(searchBox);

            sidebar.AddContent(new SidebarButton("home", UIcons.Home, "Home"));
            sidebar.AddContent(new SidebarButton("profile", UIcons.User, "Profile"));

            sidebar.AddContent(new SidebarSeparator("sep1", "Grouping"));

            var tabs = new SidebarPivot("tabs")
                .Add("tab1", SegmentTitle("Tab 1", UIcons.Rocket),
                    new SidebarButton("t1_btn1", UIcons.Rocket, "Launch"),
                    new SidebarButton("t1_btn2", UIcons.Rocket, "Launch 2"))
                .Add("tab2", SegmentTitle("Tab 2", UIcons.Plane),
                    new SidebarButton("t2_btn1", UIcons.Globe, "World"),
                    new SidebarButton("t2_btn2", UIcons.Globe, "World 2"));

            sidebar.AddContent(tabs);

            var settingsNav = new SidebarNav("settings", UIcons.Settings, "Settings", true);

            settingsNav.Add(new SidebarButton("general", UIcons.Settings, "General"));
            settingsNav.Add(new SidebarButton("security", UIcons.Lock, "Security"));
            settingsNav.Add(new SidebarButton("privacy", UIcons.Eye, "Privacy"));

            sidebar.AddContent(settingsNav);

            sidebar.AddContent(new SidebarSeparator("sep2"));

            sidebar.AddContent(new SidebarButton("help", UIcons.Question, "Help"));
            sidebar.AddContent(new SidebarButton("link", "https://bing.com", UIcons.Link, "External Link"));

            var lightDark = new SidebarCommand(UIcons.Sun).Tooltip("Light Mode");

            lightDark.OnClick(() =>
            {
                if (Theme.IsDark)
                {
                    Theme.Light();
                    lightDark.SetIcon(UIcons.Sun).Tooltip("Light Mode");
                }
                else
                {
                    Theme.Dark();
                    lightDark.SetIcon(UIcons.Moon).Tooltip("Dark Mode");
                }
            });

            var toast  = new SidebarCommand(Emoji.Bread).Tooltip("Toast !").OnClick(() => Toast().Success("Here is your toast 🍞"));
            var pizza  = new SidebarCommand(Emoji.Pizza).Tooltip("Pizza!").OnClick(() => Toast().Success("Here is your pizza 🍕"));
            var cheese = new SidebarCommand(Emoji.Cheese).Tooltip("Cheese !").OnClick(() => Toast().Success("Here is your cheese 🧀"));

            var commands = new SidebarCommands("TOASTS", lightDark, toast, pizza, cheese);

            var fireworks = new SidebarCommand(Emoji.ConfettiBall).Tooltip("Confetti !").OnClick(() => Toast().Success("🎊"));
            var happy     = new SidebarCommand(Emoji.Smile).Tooltip("I like this !").OnClick(() => Toast().Success("Thanks for your feedback"));
            var sad       = new SidebarCommand(Emoji.Disappointed).Tooltip("I don't like this!").OnClick(() => Toast().Success("Thanks for your feedback"));

            var dotsMenu = new SidebarCommand(UIcons.MenuDots).OnClickMenu(() => new ISidebarItem[]
            {
                new SidebarButton("MANAGE_ACCOUNT", UIcons.User,     "Manage Account"),
                new SidebarButton("PREFERENCES",    UIcons.Settings, "Preferences"),
                new SidebarButton("DELETE",         UIcons.Trash,    "Delete Account"),
                new SidebarCommands("EMOTIONS", new SidebarCommand(Emoji.Smile), new SidebarCommand(Emoji.Disappointed), new SidebarCommand(Emoji.Angry)),
                new SidebarCommands("ADD_DELETE", new SidebarCommand(UIcons.Plus).Primary(), new SidebarCommand(UIcons.Trash).Danger()).AlignEnd(),
                new SidebarButton("SIGNOUT", UIcons.SignOutAlt, "Sign Out"),
            });

            var commandsEndAligned = new SidebarCommands("SETTINGS", fireworks, dotsMenu).AlignEnd();

            sidebar.AddFooter(new SidebarNav("DEEP_NAV", Emoji.EvergreenTree, "Multi-Depth Nav", true).Sortable(sortableGroup: "trees").AddRange(CreateDeepNav("root")));

            sidebar.AddFooter(new SidebarNav("EMPTY_NAV", Emoji.MailboxWithNoMail, "Empty Nav", true).OnOpenIconClick((e, m) => Toast().Success("You clicked on the icon!")));

            sidebar.AddFooter(commands);
            sidebar.AddFooter(commandsEndAligned);

            sidebar.AddFooter(new SidebarButton("CURIOSITY_REF",
                "https://curiosity.ai",
                new ImageIcon("/assets/img/curiosity-logo.svg"),
                "By Curiosity",
                new SidebarBadge("+3").Foreground(Theme.Primary.Foreground).Background(Theme.Primary.Background),
                new SidebarCommand("https://github.com/curiosity-ai/tesserae", UIcons.ArrowUpRightFromSquare)).Tooltip("Made with ❤ by Curiosity"));

            var component = SplitView().WS().H(800).LeftIsSmaller(400.px()).Resizable()
                .Left(sidebar.S())
                .Right(CenteredCardWithBackground(Message("Your application content goes here")));

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

        private static IEnumerable<ISidebarItem> CreateDeepNav(string path, int currentDepth = 0, int maxDepth = 3)
        {
            if (currentDepth < maxDepth)
            {
                Action<SidebarNav.ParentChangedEvent> HandleChange = (e)=>
                {
                    Dialog($"Move element {e.Item.OwnIdentifier} from {e.From.OwnIdentifier} to {e.To.OwnIdentifier}?").YesNo(onNo: e.Cancel);
                };
                yield return new SidebarNav($"{path}/{currentDepth + 1}.1", Emoji.DeciduousTree, $"{path}/{currentDepth + 1}.1", true).Sortable(sortableGroup: "trees").AddRange(CreateDeepNav($"{path}/{currentDepth + 1}.1", currentDepth + 1, maxDepth)).OnParentChanged(HandleChange);
                yield return new SidebarNav($"{path}/{currentDepth + 1}.2", Emoji.DeciduousTree, $"{path}/{currentDepth + 1}.2", true).Sortable(sortableGroup: "trees").AddRange(CreateDeepNav($"{path}/{currentDepth + 1}.2", currentDepth + 1, maxDepth)).OnParentChanged(HandleChange);
                yield return new SidebarNav($"{path}/{currentDepth + 1}.3", Emoji.DeciduousTree, $"{path}/{currentDepth + 1}.3", true).Sortable(sortableGroup: "trees").AddRange(CreateDeepNav($"{path}/{currentDepth + 1}.3", currentDepth + 1, maxDepth)).OnParentChanged(HandleChange);
            }
        }
    }
}

API reference

class

Sidebar

public sealed class Sidebar : IComponent, IBindableComponent<bool>

A Sidebar component that can be collapsed or expanded, containing header, middle, and footer sections.

Namespace: Tesserae
Implements: IComponent, IBindableComponent<bool>

Constructors

Name	Description
Sidebar	Initializes a new instance of the Sidebar class.

Properties

Name	Description
IsClosed	Gets or sets whether the sidebar is closed.
IsShifted	Gets whether the sidebar is currently showing the shifted (child) sidebar.
ShiftedSidebar	Gets the child sidebar that is currently mounted for shifting, if any.

Methods

Name	Description
Secondary	Sets the sidebar background to the secondary background color.
Sortable	Sets whether the middle content items are sortable.
AsNavbar	Configures the sidebar to render as a navbar.
Closed	Sets whether the sidebar is closed.
Toggle	Toggles the closed state of the sidebar.
ShiftTo	Slides horizontally into a child sidebar, used when navigating into an interface that has its own sidebar. The child sidebar is rendered inside this one and follows its open/closed state. Only one depth level is supported: shifting into another child replaces the current one. Call `ShiftBack` to slide back into this sidebar.
ShiftBack	Slides back from the child sidebar into this sidebar.
OnShiftChanged	Adds a handler that is called whenever the sidebar shifts into the child sidebar (true) or back (false).
AddHeader	Adds an item to the sidebar header section.
InsertAfterHeader	Inserts an item after another item in the sidebar header section.
AddContent	Adds an item to the middle content section.
InsertAfterContent	Inserts an item after another item in the middle content section.
RemoveContent	Removes an item from the middle content section.
AddFooter	Adds an item to the sidebar footer section.
InsertAfterFooter	Inserts an item after another item in the sidebar footer section.
Clear	Clears all sections of the sidebar.
ClearHeader	Clears the header section.
ClearContent	Clears the middle content section.
ClearFooter	Clears the footer section.
Render	Renders the sidebar.
AsObservable	Returns an observable that tracks the closed/open state of the sidebar.
SetBoundValue	Programmatically opens or closes the sidebar as part of a two-way binding.
LoadSorting	Loads the sorting order for sidebar items. Should be called after all items have been added.
GetCurrentSorting	Gets the current sorting order of all items in the sidebar.
Refresh	Refreshes the sidebar rendering.
OnSortingChanged	Adds a sorting change event handler.
Search	Searches/Filters the sidebar content items.
GetOwnIdentifier	Gets the own identifier of an item by removing group identifier prefix.

Method

Sidebar.ShiftTo

public Sidebar ShiftTo(Sidebar child)

Slides horizontally into a child sidebar, used when navigating into an interface that has its own sidebar. The child sidebar is rendered inside this one and follows its open/closed state. Only one depth level is supported: shifting into another child replaces the current one. Call ShiftBack to slide back into this sidebar.

Parameters

child: The sidebar to shift into.

Returns

The current instance of the type.

Method

Sidebar.OnShiftChanged

public Sidebar OnShiftChanged(Action<bool> onShiftChanged)

Adds a handler that is called whenever the sidebar shifts into the child sidebar (true) or back (false).

Parameters

onShiftChanged: The event handler.

Returns

The current instance of the type.

Method

Sidebar.InsertAfterHeader

public Sidebar InsertAfterHeader(ISidebarItem item, ISidebarItem addAfter)

Inserts an item after another item in the sidebar header section.

Parameters

item: The item to insert.
addAfter: The item to insert after.

Returns

The current instance of the type.

Method

Sidebar.AddContent

public Sidebar AddContent(ISidebarItem item)

Adds an item to the middle content section.

Parameters

item: The item to add.

Returns

The current instance of the type.

Method

Sidebar.InsertAfterContent

public Sidebar InsertAfterContent(ISidebarItem item, ISidebarItem addAfter)

Inserts an item after another item in the middle content section.

Parameters

item: The item to insert.
addAfter: The item to insert after.

Returns

The current instance of the type.

Method

Sidebar.RemoveContent

public Sidebar RemoveContent(ISidebarItem item)

Removes an item from the middle content section.

Parameters

item: The item to remove.

Returns

The current instance of the type.

Method

Sidebar.InsertAfterFooter

public Sidebar InsertAfterFooter(ISidebarItem item, ISidebarItem addAfter)

Inserts an item after another item in the sidebar footer section.

Parameters

item: The item to insert.
addAfter: The item to insert after.

Returns

The current instance of the type.

Method

Sidebar.ClearContent

public void ClearContent()

Clears the middle content section.

Method

Sidebar.LoadSorting

public void LoadSorting(Dictionary<string, string[]> itemOrder)

Loads the sorting order for sidebar items. Should be called after all items have been added.

Parameters

itemOrder: A dictionary mapping group identifiers to ordered item identifiers.

Method

Sidebar.GetCurrentSorting

public Dictionary<string, string[]> GetCurrentSorting()

Gets the current sorting order of all items in the sidebar.

Returns

A dictionary mapping group identifiers to ordered item identifiers.

Method

Sidebar.GetOwnIdentifier

public static string GetOwnIdentifier(string identifier)

Gets the own identifier of an item by removing group identifier prefix.

Parameters

identifier: The full identifier.

Returns

The own identifier.

Fields

Name	Description
SIDEBAR_TRANSITION_TIME	The transition time for sidebar animations in milliseconds.
ROOT_SIDEBAR_FOR_ORDERING	The root identifier used for ordering.
GroupIdentifierSeparator	The separator used between group identifiers and item identifiers.

class

SidebarButton

public class SidebarButton : ISearchableSidebarItem

A Button component for use within a Sidebar, supporting both open and closed states.

Namespace: Tesserae
Implements: ISearchableSidebarItem

Properties

Name	Description
IsSelected	Gets or sets whether the button is currently selected.
CurrentRendered	Gets the component that is currently rendered.
Identifier	Gets the full identifier of the button.
OwnIdentifier	Gets the own identifier of the button.

Property

SidebarButton.IsSelected

public bool IsSelected { get ; set ; }

Gets or sets whether the button is currently selected.

Property

SidebarButton.CurrentRendered

public IComponent CurrentRendered

Gets the component that is currently rendered.

Property

SidebarButton.Identifier

public string Identifier { get; private set; }

Gets the full identifier of the button.

Property

SidebarButton.OwnIdentifier

public string OwnIdentifier

Gets the own identifier of the button.

Methods

Name	Description
AddGroupIdentifier	Adds a group identifier prefix to the button's identifier.
Show	Shows the button.
Collapse	Collapses the button.
NotSortable	Marks the button as not sortable.
ClearProgress	Clears the progress indication background.
Progress	Sets a progress indication background.
SetText	Sets the text of the button.
CommandsAlwaysVisible	Ensures that commands associated with the button are always visible when the sidebar is open.
Light	Sets the button to use a light style.
Rounded	Renders the button with rounded corners (defaults to a fully rounded "pill" shape), matching the rounded SidebarSearchBox style.
AsSearchBox	Dresses the button as a search field: a rounded outline, the label set as a placeholder rather than as a label, and - when keys are given - the shortcut that reaches it shown at the far end. For a search that answers somewhere else, which is most of them now: what the box would be for happens in a palette or on a page, so the thing on the rail only has to look like where a search starts and be pressable. A real input would take a caret it has nothing to do with.
Danger	Sets the button to use a danger style.
Default	Sets the button to use the default style.
Success	Sets the button to use a success style.
Primary	Sets the button to use the primary style.
Selected	Sets whether the button is selected.
Tooltip	Sets a tooltip for the closed state button.
OpenedTooltip	Sets a tooltip for the open state button.
OnClick	Adds a click event handler to the button.
OnOpenIconClick	Adds a click event handler to the icon when the button is open.
Id	Sets the ID of the button.
OnContextMenu	Adds a context menu event handler to the button.
SetIcon	Sets the icon for the button.
OnRendered	Adds a rendered event handler.
RenderClosed	Renders the button for the closed state of the sidebar.
RenderOpen	Renders the button for the open state of the sidebar.

Method

SidebarButton.AddGroupIdentifier

public void AddGroupIdentifier(string groupIdentifier)

Adds a group identifier prefix to the button's identifier.

Method

SidebarButton.Show

public void Show()

Shows the button.

Method

SidebarButton.Collapse

public void Collapse()

Collapses the button.

Method

SidebarButton.NotSortable

public SidebarButton NotSortable()

Marks the button as not sortable.

Returns

The current instance of the type.

Method

SidebarButton.ClearProgress

public SidebarButton ClearProgress()

Clears the progress indication background.

Returns

The current instance of the type.

Method

SidebarButton.Progress

public SidebarButton Progress(float progress)

Sets a progress indication background.

Parameters

progress: The progress value (0 to 1).

Returns

The current instance of the type.

Method

SidebarButton.SetText

public SidebarButton SetText(string text)

Sets the text of the button.

Parameters

text: The text.

Returns

The current instance of the type.

Method

SidebarButton.CommandsAlwaysVisible

public SidebarButton CommandsAlwaysVisible(bool alwaysVisible = true)

Ensures that commands associated with the button are always visible when the sidebar is open.

Returns

The current instance of the type.

Method

SidebarButton.Light

public SidebarButton Light()

Sets the button to use a light style.

Returns

The current instance of the type.

Method

SidebarButton.Rounded

public SidebarButton Rounded(BorderRadius radius = BorderRadius.Full)

Renders the button with rounded corners (defaults to a fully rounded "pill" shape), matching the rounded SidebarSearchBox style.

Parameters

radius: The border radius to apply. Defaults to Full.

Returns

The current instance of the type.

Method

SidebarButton.AsSearchBox

public SidebarButton AsSearchBox(params string[] shortcutKeys)

Dresses the button as a search field: a rounded outline, the label set as a placeholder rather than as a label, and - when keys are given - the shortcut that reaches it shown at the far end. For a search that answers somewhere else, which is most of them now: what the box would be for happens in a palette or on a page, so the thing on the rail only has to look like where a search starts and be pressable. A real input would take a caret it has nothing to do with.

Parameters

shortcutKeys: The keys to show at the end, e.g. ("Ctrl", "K"). None hides it.

Method

SidebarButton.Danger

public SidebarButton Danger()

Sets the button to use a danger style.

Returns

The current instance of the type.

Method

SidebarButton.Default

public SidebarButton Default()

Sets the button to use the default style.

Returns

The current instance of the type.

Method

SidebarButton.Success

public SidebarButton Success()

Sets the button to use a success style.

Returns

The current instance of the type.

Method

SidebarButton.Primary

public SidebarButton Primary()

Sets the button to use the primary style.

Returns

The current instance of the type.

Method

SidebarButton.Selected

public SidebarButton Selected(bool isSelected = true)

Sets whether the button is selected.

Parameters

isSelected: Whether the button is selected.

Returns

The current instance of the type.

Method

SidebarButton.Tooltip

Overload
Tooltip(string)	Sets a tooltip for the closed state button.
Tooltip(IComponent)	Sets a tooltip component for the closed state button.
Tooltip(Func<IComponent>)	Sets a tooltip generator function for the closed state button.

Tooltip(string)

public SidebarButton Tooltip(string text)

Sets a tooltip for the closed state button.

Parameters

text string: The tooltip text.

Returns

The current instance of the type.

Tooltip(IComponent)

public SidebarButton Tooltip(IComponent tooltip)

Sets a tooltip component for the closed state button.

Parameters

tooltip IComponent: The tooltip component.

Returns

The current instance of the type.

Tooltip(Func<IComponent>)

public SidebarButton Tooltip(Func<IComponent> tooltip)

Sets a tooltip generator function for the closed state button.

Parameters

tooltip Func<IComponent>: The tooltip generator function.

Returns

The current instance of the type.

Method

SidebarButton.OpenedTooltip

Overload
OpenedTooltip(string)	Sets a tooltip for the open state button.
OpenedTooltip(IComponent)	Sets a tooltip component for the open state button.
OpenedTooltip(Func<IComponent>)	Sets a tooltip generator function for the open state button.

OpenedTooltip(string)

public SidebarButton OpenedTooltip(string text)

Sets a tooltip for the open state button.

Parameters

text string: The tooltip text.

Returns

The current instance of the type.

OpenedTooltip(IComponent)

public SidebarButton OpenedTooltip(IComponent tooltip)

Sets a tooltip component for the open state button.

Parameters

tooltip IComponent: The tooltip component.

Returns

The current instance of the type.

OpenedTooltip(Func<IComponent>)

public SidebarButton OpenedTooltip(Func<IComponent> tooltip)

Sets a tooltip generator function for the open state button.

Parameters

tooltip Func<IComponent>: The tooltip generator function.

Returns

The current instance of the type.

Method

SidebarButton.OnClick

Overload
OnClick(Action)	Adds a click event handler to the button.
OnClick(Action<Button, MouseEvent>)	Adds a click event handler with button and mouse event arguments.

OnClick(Action)

public SidebarButton OnClick(Action action)

Adds a click event handler to the button.

Parameters

action Action: The event handler action.

Returns

The current instance of the type.

OnClick(Action<Button, MouseEvent>)

public SidebarButton OnClick(Action<Button, MouseEvent> action)

Adds a click event handler with button and mouse event arguments.

Parameters

action Action<Button, MouseEvent>: The event handler action.

Returns

The current instance of the type.

Method

SidebarButton.OnOpenIconClick

Overload
OnOpenIconClick(Action<HTMLElement, MouseEvent>)	Adds a click event handler to the icon when the button is open.
OnOpenIconClick(Action)	Adds a click event handler to the icon when the button is open.

OnOpenIconClick(Action<HTMLElement, MouseEvent>)

public SidebarButton OnOpenIconClick(Action<HTMLElement, MouseEvent> action)

Adds a click event handler to the icon when the button is open.

Parameters

action Action<HTMLElement, MouseEvent>: The event handler action.

Returns

The current instance of the type.

OnOpenIconClick(Action)

public SidebarButton OnOpenIconClick(Action action)

Adds a click event handler to the icon when the button is open.

Parameters

action Action: The event handler action.

Returns

The current instance of the type.

Method

SidebarButton.Id

public SidebarButton Id(string id)

Sets the ID of the button.

Parameters

id: The ID.

Returns

The current instance of the type.

Method

SidebarButton.OnContextMenu

Overload
OnContextMenu(Action)	Adds a context menu event handler to the button.
OnContextMenu(Action<Button, MouseEvent>)	Adds a context menu event handler with button and mouse event arguments.

OnContextMenu(Action)

public SidebarButton OnContextMenu(Action action)

Adds a context menu event handler to the button.

Parameters

action Action: The event handler action.

Returns

The current instance of the type.

OnContextMenu(Action<Button, MouseEvent>)

public SidebarButton OnContextMenu(Action<Button, MouseEvent> action)

Adds a context menu event handler with button and mouse event arguments.

Parameters

action Action<Button, MouseEvent>: The event handler action.

Returns

The current instance of the type.

Method

SidebarButton.SetIcon

Overload
SetIcon(UIcons, string, UIconsWeight)	Sets the icon for the button.
SetIcon(Emoji)	Sets an emoji icon for the button.

SetIcon(UIcons, string, UIconsWeight)

public SidebarButton SetIcon(UIcons icon, string color = "", UIconsWeight weight = UIconsWeight.Regular)

Sets the icon for the button.

Parameters

icon UIcons: The icon.
color string: The color of the icon.
weight UIconsWeight: The weight of the icon.

Returns

The current instance of the type.

SetIcon(Emoji)

public SidebarButton SetIcon(Emoji icon)

Sets an emoji icon for the button.

Parameters

icon Emoji: The emoji icon.

Returns

The current instance of the type.

Method

SidebarButton.OnRendered

public ISidebarItem OnRendered(Action<HTMLElement> onRendered)

Adds a rendered event handler.

Parameters

onRendered: The rendered event handler.

Returns

The current instance of the type.

Method

SidebarButton.RenderClosed

public IComponent RenderClosed()

Renders the button for the closed state of the sidebar.

Method

SidebarButton.RenderOpen

public IComponent RenderOpen()

Renders the button for the open state of the sidebar.

class

SidebarPivot

public sealed class SidebarPivot : ISearchableSidebarItem

Namespace: Tesserae
Implements: ISearchableSidebarItem

class

SidebarNav

public class SidebarNav : ISearchableSidebarItem

A hierarchical navigation component for use within a Sidebar, allowing for nested ISidebarItem elements.

Namespace: Tesserae
Implements: ISearchableSidebarItem

Properties

Name	Description
IsCollapsed	Gets or sets whether the navigation is collapsed.
IsSelected	Gets or sets whether the navigation is currently selected.
CollapsedStatus	Gets an observable for the collapsed status.
CurrentRendered	Gets the component that is currently rendered.
Identifier	Gets the full identifier of the navigation component.
OwnIdentifier	Gets the own identifier of the navigation component.

Property

SidebarNav.IsCollapsed

public bool IsCollapsed { get ; set ; }

Gets or sets whether the navigation is collapsed.

Property

SidebarNav.IsSelected

public bool IsSelected { get ; set ; }

Gets or sets whether the navigation is currently selected.

Property

SidebarNav.CollapsedStatus

public IObservable<bool> CollapsedStatus

Gets an observable for the collapsed status.

Property

SidebarNav.CurrentRendered

public IComponent CurrentRendered

Gets the component that is currently rendered.

Property

SidebarNav.Identifier

public string Identifier { get; private set; }

Gets the full identifier of the navigation component.

Property

SidebarNav.OwnIdentifier

public string OwnIdentifier

Gets the own identifier of the navigation component.

Methods

Name	Description
Show	Shows the navigation component.
Collapse	Collapses the navigation component.
NotSortable	Marks the navigation component as not sortable.
SetText	Sets the header text of the navigation.
Collapsed	Sets whether the navigation is collapsed.
Selected	Sets whether the navigation is selected.
Toggle	Toggles the collapsed state.
OnOpenIconClick	Adds a click event handler to the open header icon.
OnClick	Adds a click event handler to the navigation header.
OnContextMenu	Adds a context menu event handler.
Clear	Clears all items from the navigation.
Add	Adds an item to the navigation.
Remove	Removes an item from the navigation.
AddRange	Adds a range of items to the navigation.
RenderClosed	Renders the navigation for the closed state of the sidebar.
RenderOpen	Renders the navigation for the open state of the sidebar.
OnRendered	Adds a rendered event handler.
AddGroupIdentifier	Adds a group identifier prefix to the navigation component's identifier.
LoadSorting	Loads the sorting order for navigation items.
GetCurrentSorting	Gets the current sorting order of all items within this navigation.
Sortable	Sets whether items within this navigation are sortable.
OnSortingChanged	Adds a sorting change event handler.
OnParentChanged	Adds a parent changed event handler, for cross-nav sorting.

Method

SidebarNav.Show

public void Show()

Shows the navigation component.

Method

SidebarNav.Collapse

public void Collapse()

Collapses the navigation component.

Method

SidebarNav.NotSortable

public SidebarNav NotSortable()

Marks the navigation component as not sortable.

Returns

The current instance of the type.

Method

SidebarNav.SetText

public SidebarNav SetText(string text)

Sets the header text of the navigation.

Parameters

text: The text.

Returns

The current instance of the type.

Method

SidebarNav.Collapsed

public SidebarNav Collapsed(bool isCollapsed = true)

Sets whether the navigation is collapsed.

Parameters

isCollapsed: Whether it is collapsed.

Returns

The current instance of the type.

Method

SidebarNav.Selected

public SidebarNav Selected(bool isSelected = true)

Sets whether the navigation is selected.

Parameters

isSelected: Whether it is selected.

Returns

The current instance of the type.

Method

SidebarNav.Toggle

public SidebarNav Toggle()

Toggles the collapsed state.

Returns

The current instance of the type.

Method

SidebarNav.OnOpenIconClick

Overload
OnOpenIconClick(Action<HTMLElement, MouseEvent>)	Adds a click event handler to the open header icon.
OnOpenIconClick(Action)	Adds a click event handler to the open header icon.

OnOpenIconClick(Action<HTMLElement, MouseEvent>)

public SidebarNav OnOpenIconClick(Action<HTMLElement, MouseEvent> action)

Adds a click event handler to the open header icon.

Parameters

action Action<HTMLElement, MouseEvent>: The event handler action.

Returns

The current instance of the type.

OnOpenIconClick(Action)

public SidebarNav OnOpenIconClick(Action action)

Adds a click event handler to the open header icon.

Parameters

action Action: The event handler action.

Returns

The current instance of the type.

Method

SidebarNav.OnClick

Overload
OnClick(Action)	Adds a click event handler to the navigation header.
OnClick(Action<SidebarNav>)	Adds a click event handler with SidebarNav argument.
OnClick(Action<Button, MouseEvent>)	Adds a click event handler with button and mouse event arguments.

OnClick(Action)

public SidebarNav OnClick(Action action)

Adds a click event handler to the navigation header.

Parameters

action Action: The event handler action.

Returns

The current instance of the type.

OnClick(Action<SidebarNav>)

public SidebarNav OnClick(Action<SidebarNav> action)

Adds a click event handler with SidebarNav argument.

Parameters

action Action<SidebarNav>: The event handler action.

Returns

The current instance of the type.

OnClick(Action<Button, MouseEvent>)

public SidebarNav OnClick(Action<Button, MouseEvent> action)

Adds a click event handler with button and mouse event arguments.

Parameters

action Action<Button, MouseEvent>: The event handler action.

Returns

The current instance of the type.

Method

SidebarNav.OnContextMenu

Overload
OnContextMenu(Action)	Adds a context menu event handler.
OnContextMenu(Action<Button, MouseEvent>)	Adds a context menu event handler with button and mouse event arguments.

OnContextMenu(Action)

public SidebarNav OnContextMenu(Action action)

Adds a context menu event handler.

Parameters

action Action: The event handler action.

Returns

The current instance of the type.

OnContextMenu(Action<Button, MouseEvent>)

public SidebarNav OnContextMenu(Action<Button, MouseEvent> action)

Adds a context menu event handler with button and mouse event arguments.

Parameters

action Action<Button, MouseEvent>: The event handler action.

Returns

The current instance of the type.

Method

SidebarNav.Clear

public void Clear()

Clears all items from the navigation.

Method

SidebarNav.Add

public void Add(ISidebarItem item)

Adds an item to the navigation.

Parameters

item: The item to add.

Method

SidebarNav.Remove

public void Remove(ISidebarItem item)

Removes an item from the navigation.

Parameters

item: The item to remove.

Method

SidebarNav.AddRange

public SidebarNav AddRange(IEnumerable<ISidebarItem> items)

Adds a range of items to the navigation.

Parameters

items: The items to add.

Returns

The current instance of the type.

Method

SidebarNav.RenderClosed

public IComponent RenderClosed()

Renders the navigation for the closed state of the sidebar.

Method

SidebarNav.RenderOpen

public IComponent RenderOpen()

Renders the navigation for the open state of the sidebar.

Method

SidebarNav.OnRendered

public ISidebarItem OnRendered(Action<HTMLElement> onRendered)

Adds a rendered event handler.

Parameters

onRendered: The rendered event handler.

Returns

The current instance of the type.

Method

SidebarNav.AddGroupIdentifier

public void AddGroupIdentifier(string groupIdentifier)

Adds a group identifier prefix to the navigation component's identifier.

Method

SidebarNav.LoadSorting

public void LoadSorting(Dictionary<string, string[]> itemOrder)

Loads the sorting order for navigation items.

Parameters

itemOrder: A dictionary mapping group identifiers to ordered item identifiers.

Method

SidebarNav.GetCurrentSorting

public Dictionary<string, string[]> GetCurrentSorting()

Gets the current sorting order of all items within this navigation.

Returns

A dictionary mapping group identifiers to ordered item identifiers.

Method

SidebarNav.Sortable

public SidebarNav Sortable(bool sortable = true, string sortableGroup = null)

Sets whether items within this navigation are sortable.

Parameters

sortable: Whether items are sortable.
sortableGroup: An optional group name for cross-nav sorting.

Returns

The current instance of the type.

Method

SidebarNav.OnSortingChanged

public SidebarNav OnSortingChanged(Action<Dictionary<string, string[]>> onSortingChanged)

Adds a sorting change event handler.

Parameters

onSortingChanged: The event handler action.

Returns

The current instance of the type.

Method

SidebarNav.OnParentChanged

public SidebarNav OnParentChanged(Action<ParentChangedEvent> onParentChanged)

Adds a parent changed event handler, for cross-nav sorting.

Parameters

onParentChanged: The event handler action.

Returns

The current instance of the type.

Events

Name	Description
_onSortingChanged	Event fired when sorting changes within the navigation.

Event

SidebarNav._onSortingChanged

public event Action<Dictionary<string, string[]>> _onSortingChanged

Event fired when sorting changes within the navigation.

class

SidebarSearchBox

public class SidebarSearchBox : ISidebarItem

Namespace: Tesserae
Implements: ISidebarItem

Properties

Name	Description
Text	The text in the box. Setting it does not raise `OnSearch` - a caller that clears the box usually has its own idea of what to do about the results.

Property

SidebarSearchBox.Text

public string Text { get ; set ; }

The text in the box. Setting it does not raise OnSearch - a caller that clears the box usually has its own idea of what to do about the results.

Methods

Name	Description
Rounded	Renders the search box with rounded corners (defaults to a fully rounded "pill" shape, like the rounded SidebarButton). Removes the underlined style so the box shows a full rounded border.
SetText	Sets the text in the box, without raising `OnSearch`.
Focus	Puts the caret in the box.
OnClick	Makes the box a way in rather than a place to type: clicking it - open, or as the icon on the closed rail - runs the handler, and so does focusing it, which is what `SetKeyboardShortcut` does. Nothing can be typed into it, because what is typed belongs to whatever the handler opened. This is the shape a search that answers somewhere else takes: the box says where to start and which key gets there, and a palette or a page does the searching.

Method

SidebarSearchBox.Rounded

public SidebarSearchBox Rounded(BorderRadius radius = BorderRadius.Full)

Renders the search box with rounded corners (defaults to a fully rounded "pill" shape, like the rounded SidebarButton). Removes the underlined style so the box shows a full rounded border.

Parameters

radius: The border radius to apply. Defaults to Full.

Returns

The current instance of the type.

Method

SidebarSearchBox.SetText

public SidebarSearchBox SetText(string text)

Sets the text in the box, without raising OnSearch.

Method

SidebarSearchBox.Focus

public SidebarSearchBox Focus()

Puts the caret in the box.

Method

SidebarSearchBox.OnClick

public SidebarSearchBox OnClick(Action onClick)

Makes the box a way in rather than a place to type: clicking it - open, or as the icon on the closed rail - runs the handler, and so does focusing it, which is what SetKeyboardShortcut does. Nothing can be typed into it, because what is typed belongs to whatever the handler opened. This is the shape a search that answers somewhere else takes: the box says where to start and which key gets there, and a palette or a page does the searching.

class

SidebarCommand

public class SidebarCommand : IComponent

A Command component for use within a Sidebar, typically appearing as a small action button.

Namespace: Tesserae
Implements: IComponent

Methods

Name	Description
Foreground	Sets the foreground color of the command button.
HookToParentContextMenu	Configures the command to hook into the parent's context menu event.
Background	Sets the background color of the command button.
Default	Sets the command to use the default style.
Primary	Sets the command to use the primary style.
Success	Sets the command to use the success style.
Danger	Sets the command to use the danger style.
Tooltip	Sets a tooltip for the command.
OnClickMenu	Configures the command to show a menu when clicked.
ShowMenu	Shows the associated menu for the command.
RaiseOnClick	Programmatically raises the click event.
RaiseOnContextMenu	Programmatically raises the context menu event.
OnClick	Adds a click event handler.
OnContextMenu	Adds a context menu event handler.
SetIcon	Sets the icon for the command.
Render	Renders the sidebar command.

Method

SidebarCommand.Foreground

public SidebarCommand Foreground(string color)

Sets the foreground color of the command button.

Parameters

color: The color.

Returns

The current instance of the type.

Method

SidebarCommand.HookToParentContextMenu

public SidebarCommand HookToParentContextMenu()

Configures the command to hook into the parent's context menu event.

Returns

The current instance of the type.

Method

SidebarCommand.Background

public SidebarCommand Background(string color)

Sets the background color of the command button.

Parameters

color: The color.

Returns

The current instance of the type.

Method

SidebarCommand.Default

public SidebarCommand Default()

Sets the command to use the default style.

Returns

The current instance of the type.

Method

SidebarCommand.Primary

public SidebarCommand Primary()

Sets the command to use the primary style.

Returns

The current instance of the type.

Method

SidebarCommand.Success

public SidebarCommand Success()

Sets the command to use the success style.

Returns

The current instance of the type.

Method

SidebarCommand.Danger

public SidebarCommand Danger()

Sets the command to use the danger style.

Returns

The current instance of the type.

Method

SidebarCommand.Tooltip

Overload
Tooltip(string)	Sets a tooltip for the command.
Tooltip(IComponent)	Sets a tooltip component for the command.
Tooltip(Func<IComponent>)	Sets a tooltip generator function for the command.

Tooltip(string)

public SidebarCommand Tooltip(string text)

Sets a tooltip for the command.

Parameters

text string: The tooltip text.

Returns

The current instance of the type.

Tooltip(IComponent)

public SidebarCommand Tooltip(IComponent tooltip)

Sets a tooltip component for the command.

Parameters

tooltip IComponent: The tooltip component.

Returns

The current instance of the type.

Tooltip(Func<IComponent>)

public SidebarCommand Tooltip(Func<IComponent> tooltip)

Sets a tooltip generator function for the command.

Parameters

tooltip Func<IComponent>: The tooltip generator function.

Returns

The current instance of the type.

Method

SidebarCommand.OnClickMenu

public SidebarCommand OnClickMenu(Func<ISidebarItem[]> generator)

Configures the command to show a menu when clicked.

Parameters

generator: A function that generates the sidebar items for the menu.

Returns

The current instance of the type.

Method

SidebarCommand.ShowMenu

public void ShowMenu()

Shows the associated menu for the command.

Method

SidebarCommand.RaiseOnClick

public SidebarCommand RaiseOnClick(MouseEvent mouseEvent)

Programmatically raises the click event.

Parameters

mouseEvent: The mouse event arguments.

Returns

The current instance of the type.

Method

SidebarCommand.RaiseOnContextMenu

public SidebarCommand RaiseOnContextMenu(MouseEvent mouseEvent)

Programmatically raises the context menu event.

Parameters

mouseEvent: The mouse event arguments.

Returns

The current instance of the type.

Method

SidebarCommand.OnClick

Overload
OnClick(Action)	Adds a click event handler.
OnClick(Action<Button, MouseEvent>)	Adds a click event handler with button and mouse event arguments.

OnClick(Action)

public SidebarCommand OnClick(Action action)

Adds a click event handler.

Parameters

action Action: The event handler action.

Returns

The current instance of the type.

OnClick(Action<Button, MouseEvent>)

public SidebarCommand OnClick(Action<Button, MouseEvent> action)

Adds a click event handler with button and mouse event arguments.

Parameters

action Action<Button, MouseEvent>: The event handler action.

Returns

The current instance of the type.

Method

SidebarCommand.OnContextMenu

Overload
OnContextMenu(Action)	Adds a context menu event handler.
OnContextMenu(Action<Button, MouseEvent>)	Adds a context menu event handler with button and mouse event arguments.

OnContextMenu(Action)

public SidebarCommand OnContextMenu(Action action)

Adds a context menu event handler.

Parameters

action Action: The event handler action.

Returns

The current instance of the type.

OnContextMenu(Action<Button, MouseEvent>)

public SidebarCommand OnContextMenu(Action<Button, MouseEvent> action)

Adds a context menu event handler with button and mouse event arguments.

Parameters

action Action<Button, MouseEvent>: The event handler action.

Returns

The current instance of the type.

Method

SidebarCommand.SetIcon

Overload
SetIcon(UIcons, string, UIconsWeight)	Sets the icon for the command.
SetIcon(Emoji)	Sets an emoji icon for the command.

SetIcon(UIcons, string, UIconsWeight)

public SidebarCommand SetIcon(UIcons icon, string color = "", UIconsWeight weight = UIconsWeight.Regular)

Sets the icon for the command.

Parameters

icon UIcons: The icon.
color string: The color of the icon.
weight UIconsWeight: The weight of the icon.

Returns

The current instance of the type.

SetIcon(Emoji)

public SidebarCommand SetIcon(Emoji icon)

Sets an emoji icon for the command.

Parameters

icon Emoji: The emoji icon.

Returns

The current instance of the type.

Method

SidebarCommand.Render

public HTMLElement Render()

Renders the sidebar command.

Returns

The rendered HTMLElement.

class

SidebarCommands

public class SidebarCommands : ISidebarItem

A component for grouping multiple SidebarCommand items into a single line within a Sidebar.

Namespace: Tesserae
Implements: ISidebarItem

Properties

Name	Description
IsSelected	Gets or sets whether the group is currently selected.
CurrentRendered	Gets the component that is currently rendered.
Identifier	Gets the full identifier of the command group.
OwnIdentifier	Gets the own identifier of the command group.

Property

SidebarCommands.IsSelected

public bool IsSelected { get; set; }

Gets or sets whether the group is currently selected.

Property

SidebarCommands.CurrentRendered

public IComponent CurrentRendered { get; private set; }

Gets the component that is currently rendered.

Property

SidebarCommands.Identifier

public string Identifier { get; private set; }

Gets the full identifier of the command group.

Property

SidebarCommands.OwnIdentifier

public string OwnIdentifier

Gets the own identifier of the command group.

Methods

Name	Description
RenderOpen	Renders the commands for the open state of the sidebar.
Show	Shows the commands.
Collapse	Collapses the commands.
RenderOpenFull	Renders all commands for the open state without truncation.
RenderClosed	Renders the commands for the closed state of the sidebar.
AlignEnd	Aligns the commands to the end of the line.
NotSortable	Marks the commands as not sortable.
AddGroupIdentifier	Adds a group identifier prefix to the command group's identifier.

Method

SidebarCommands.RenderOpen

public IComponent RenderOpen()

Renders the commands for the open state of the sidebar.

Method

SidebarCommands.Show

public void Show()

Shows the commands.

Method

SidebarCommands.Collapse

public void Collapse()

Collapses the commands.

Method

SidebarCommands.RenderOpenFull

public IComponent RenderOpenFull()

Renders all commands for the open state without truncation.

Method

SidebarCommands.RenderClosed

public IComponent RenderClosed()

Renders the commands for the closed state of the sidebar.

Method

SidebarCommands.AlignEnd

public SidebarCommands AlignEnd()

Aligns the commands to the end of the line.

Returns

The current instance of the type.

Method

SidebarCommands.NotSortable

public SidebarCommands NotSortable()

Marks the commands as not sortable.

Returns

The current instance of the type.

Method

SidebarCommands.AddGroupIdentifier

public void AddGroupIdentifier(string groupIdentifier)

Adds a group identifier prefix to the command group's identifier.

class

SidebarText

public class SidebarText : ISidebarItem

A Text component for use within a Sidebar, supporting both open and closed states.

Namespace: Tesserae
Implements: ISidebarItem

Constructors

Name	Description
SidebarText	Initializes a new instance of the SidebarText class.

Constructor

SidebarText

public SidebarText(string identifier, string text, string closedText = null, TextSize textSize = TextSize.Small, TextWeight textWeight = TextWeight.Regular)

Initializes a new instance of the SidebarText class.

Parameters

identifier: The identifier for the text item.
text: The text to display when the sidebar is open.
closedText: The optional text to display when the sidebar is closed.
textSize: The size of the text.
textWeight: The weight of the text.

Properties

Name	Description
CurrentRendered	Gets the component that is currently rendered.
IsSelected	Gets or sets whether the item is currently selected.
Identifier	Gets the full identifier of the text component.
OwnIdentifier	Gets the own identifier of the text component.

Property

SidebarText.CurrentRendered

public IComponent CurrentRendered

Gets the component that is currently rendered.

Property

SidebarText.IsSelected

public bool IsSelected { get; set; }

Gets or sets whether the item is currently selected.

Property

SidebarText.Identifier

public string Identifier { get; private set; }

Gets the full identifier of the text component.

Property

SidebarText.OwnIdentifier

public string OwnIdentifier

Gets the own identifier of the text component.

Methods

Name	Description
Show	Shows the text component.
Collapse	Collapses the text component.
NotSortable	Marks the text component as not sortable.
AddGroupIdentifier	Adds a group identifier prefix to the text component's identifier.
SetText	Sets the text content for the open state.
Foreground	Sets the foreground color of the text.
PT	Sets the top padding of the text.
PB	Sets the bottom padding of the text.
PL	Sets the left padding of the text.
RenderClosed	Renders the text for the closed state of the sidebar.
RenderOpen	Renders the text for the open state of the sidebar.

Method

SidebarText.Show

public void Show()

Shows the text component.

Method

SidebarText.Collapse

public void Collapse()

Collapses the text component.

Method

SidebarText.NotSortable

public SidebarText NotSortable()

Marks the text component as not sortable.

Returns

The current instance of the type.

Method

SidebarText.AddGroupIdentifier

public void AddGroupIdentifier(string groupIdentifier)

Adds a group identifier prefix to the text component's identifier.

Method

SidebarText.SetText

public SidebarText SetText(string text)

Sets the text content for the open state.

Parameters

text: The text.

Returns

The current instance of the type.

Method

SidebarText.Foreground

public SidebarText Foreground(string color)

Sets the foreground color of the text.

Parameters

color: The color.

Returns

The current instance of the type.

Method

SidebarText.PT

public SidebarText PT(int pixels)

Sets the top padding of the text.

Parameters

pixels: The padding in pixels.

Returns

The current instance of the type.

Method

SidebarText.PB

public SidebarText PB(int pixels)

Sets the bottom padding of the text.

Parameters

pixels: The padding in pixels.

Returns

The current instance of the type.

Method

SidebarText.PL

public SidebarText PL(int pixels)

Sets the left padding of the text.

Parameters

pixels: The padding in pixels.

Returns

The current instance of the type.

Method

SidebarText.RenderClosed

public IComponent RenderClosed()

Renders the text for the closed state of the sidebar.

Method

SidebarText.RenderOpen

public IComponent RenderOpen()

Renders the text for the open state of the sidebar.

class

SidebarBadge

public class SidebarBadge : IComponent

A Badge component for sidebar items, often used to display counts or status indicators.

Namespace: Tesserae
Implements: IComponent

Constructors

Name	Description
SidebarBadge	Initializes a new instance of the SidebarBadge class.

Constructor

SidebarBadge

Overload
SidebarBadge(string, UIcons, TextSize)	Initializes a new instance of the SidebarBadge class.
SidebarBadge(string, UIcons)	Initializes a new instance of the SidebarBadge class.
SidebarBadge(string)	Initializes a new instance of the SidebarBadge class.
SidebarBadge(ISidebarIcon)	Initializes a new instance of the SidebarBadge class with an image.

SidebarBadge(string, UIcons, TextSize)

public SidebarBadge(string badge, UIcons badgeIcon, TextSize iconSize = TextSize.Tiny)

Initializes a new instance of the SidebarBadge class.

Parameters

badge string: The text content of the badge.
badgeIcon UIcons: An optional icon for the badge.
iconSize TextSize: The size of the icon.

SidebarBadge(string, UIcons)

public SidebarBadge(string badge, UIcons badgeIcon)

Initializes a new instance of the SidebarBadge class.

Parameters

badge string: The text content of the badge.
badgeIcon UIcons: An optional icon for the badge.

SidebarBadge(string)

public SidebarBadge(string badge)

Initializes a new instance of the SidebarBadge class.

Parameters

badge string: The text content of the badge.

SidebarBadge(ISidebarIcon)

public SidebarBadge(ISidebarIcon image)

Initializes a new instance of the SidebarBadge class with an image.

Parameters

image ISidebarIcon: The image icon.

Methods

Name	Description
SemiTransparent	Sets the badge icon to be semi-transparent.
Foreground	Sets the foreground color of the badge.
Background	Sets the background color of the badge.
Default	Sets the badge to use the default style.
Primary	Sets the badge to use the primary style.
Success	Sets the badge to use the success style.
Danger	Sets the badge to use the danger style.
Tooltip	Sets a tooltip for the badge.
SetIcon	Sets the icon for the badge.
SetBadge	Sets the text content of the badge.
Render	Renders the sidebar badge.

Method

SidebarBadge.SemiTransparent

public SidebarBadge SemiTransparent()

Sets the badge icon to be semi-transparent.

Returns

The current instance of the type.

Method

SidebarBadge.Foreground

public SidebarBadge Foreground(string color)

Sets the foreground color of the badge.

Parameters

color: The color.

Returns

The current instance of the type.

Method

SidebarBadge.Background

public SidebarBadge Background(string color)

Sets the background color of the badge.

Parameters

color: The color.

Returns

The current instance of the type.

Method

SidebarBadge.Default

public SidebarBadge Default()

Sets the badge to use the default style.

Returns

The current instance of the type.

Method

SidebarBadge.Primary

public SidebarBadge Primary()

Sets the badge to use the primary style.

Returns

The current instance of the type.

Method

SidebarBadge.Success

public SidebarBadge Success()

Sets the badge to use the success style.

Returns

The current instance of the type.

Method

SidebarBadge.Danger

public SidebarBadge Danger()

Sets the badge to use the danger style.

Returns

The current instance of the type.

Method

SidebarBadge.Tooltip

Overload
Tooltip(string)	Sets a tooltip for the badge.
Tooltip(IComponent)	Sets a tooltip component for the badge.
Tooltip(Func<IComponent>)	Sets a tooltip generator function for the badge.

Tooltip(string)

public SidebarBadge Tooltip(string text)

Sets a tooltip for the badge.

Parameters

text string: The tooltip text.

Returns

The current instance of the type.

Tooltip(IComponent)

public SidebarBadge Tooltip(IComponent tooltip)

Sets a tooltip component for the badge.

Parameters

tooltip IComponent: The tooltip component.

Returns

The current instance of the type.

Tooltip(Func<IComponent>)

public SidebarBadge Tooltip(Func<IComponent> tooltip)

Sets a tooltip generator function for the badge.

Parameters

tooltip Func<IComponent>: The tooltip generator function.

Returns

The current instance of the type.

Method

SidebarBadge.SetIcon

Overload
SetIcon(UIcons, string, UIconsWeight)	Sets the icon for the badge.
SetIcon(Emoji)	Sets an emoji icon for the badge.

SetIcon(UIcons, string, UIconsWeight)

public SidebarBadge SetIcon(UIcons icon, string color = "", UIconsWeight weight = UIconsWeight.Regular)

Sets the icon for the badge.

Parameters

icon UIcons: The icon.
color string: The color of the icon.
weight UIconsWeight: The weight of the icon.

Returns

The current instance of the type.

SetIcon(Emoji)

public SidebarBadge SetIcon(Emoji icon)

Sets an emoji icon for the badge.

Parameters

icon Emoji: The emoji icon.

Returns

The current instance of the type.

Method

SidebarBadge.SetBadge

public SidebarBadge SetBadge(string badge)

Sets the text content of the badge.

Parameters

badge: The badge text.

Returns

The current instance of the type.

Method

SidebarBadge.Render

public HTMLElement Render()

Renders the sidebar badge.

Returns

The rendered HTMLElement.

SidebarComponent

A sidebar item that is simply a component of the host's own (a list, a picker, a whole panel), for the parts of a sidebar that buttons and separators can't express. A chat history, a tree of spaces, a filter form: whatever it is, it keeps its own state and only asks the sidebar for a place to stand. The closed (icon-rail) state gets a component of its own; passing none leaves the item out of the rail entirely, which is usually what a list wants.

class

SidebarComponent

public class SidebarComponent : ISidebarItem

A sidebar item that is simply a component of the host's own - a list, a picker, a whole panel - for the parts of a sidebar that buttons and separators can't express. A chat history, a tree of spaces, a filter form: whatever it is, it keeps its own state and only asks the sidebar for a place to stand. The closed (icon-rail) state gets a component of its own, since almost nothing that is worth putting here fits in a 48px rail. Passing none - the default - leaves the item out of the rail entirely, which is usually what a list wants.

Namespace: Tesserae
Implements: ISidebarItem

Constructors

Name	Description
SidebarComponent	Initializes a new instance of the SidebarComponent class.

Constructor

SidebarComponent

public SidebarComponent(string identifier, IComponent component, IComponent closedComponent = null)

Initializes a new instance of the SidebarComponent class.

Parameters

identifier: The identifier for the item.
component: What the item shows while the sidebar is open.
closedComponent: What it shows while the sidebar is collapsed to its rail. Null - the default - shows nothing at all there.

Properties

Name	Description
IsSelected	Gets or sets whether the item is currently selected. A hosted component owns its own selection, so this is only carried for the sidebar's sake.
CurrentRendered	Gets the component that is currently rendered.
Identifier	Gets the full identifier of the item, including group identifiers.
OwnIdentifier	Gets the own identifier of the item, without group identifiers.

Property

SidebarComponent.IsSelected

public bool IsSelected { get; set; }

Gets or sets whether the item is currently selected. A hosted component owns its own selection, so this is only carried for the sidebar's sake.

Property

SidebarComponent.CurrentRendered

public IComponent CurrentRendered

Gets the component that is currently rendered.

Property

SidebarComponent.Identifier

public string Identifier { get; private set; }

Gets the full identifier of the item, including group identifiers.

Property

SidebarComponent.OwnIdentifier

public string OwnIdentifier

Gets the own identifier of the item, without group identifiers.

Methods

Name	Description
AddGroupIdentifier	Adds a group identifier prefix to the item's identifier.
Show	Shows the item.
Collapse	Collapses the item.
NotSortable	Marks the item as not draggable in a sortable sidebar - which is what a hosted component usually wants, since it is a region rather than an entry in a list.
Grow	Lets the item take the leftover height of the sidebar's middle section, for a component that scrolls its own content (a list of chats, a tree).
RenderClosed	Renders the item for the closed state of the sidebar.
RenderOpen	Renders the item for the open state of the sidebar.

Method

SidebarComponent.AddGroupIdentifier

public void AddGroupIdentifier(string groupIdentifier)

Adds a group identifier prefix to the item's identifier.

Method

SidebarComponent.Show

public void Show()

Shows the item.

Method

SidebarComponent.Collapse

public void Collapse()

Collapses the item.

Method

SidebarComponent.NotSortable

public SidebarComponent NotSortable()

Marks the item as not draggable in a sortable sidebar - which is what a hosted component usually wants, since it is a region rather than an entry in a list.

Method

SidebarComponent.Grow

public SidebarComponent Grow()

Lets the item take the leftover height of the sidebar's middle section, for a component that scrolls its own content (a list of chats, a tree).

Method

SidebarComponent.RenderClosed

public IComponent RenderClosed()

Renders the item for the closed state of the sidebar.

Method

SidebarComponent.RenderOpen

public IComponent RenderOpen()

Renders the item for the open state of the sidebar.

interface

ISidebarItem

public interface ISidebarItem

Defines the interface for items that can be displayed within a Sidebar.

Namespace: Tesserae

Properties

Name	Description
IsSelected	Gets or sets whether the item is currently selected.
CurrentRendered	Gets the component that is currently rendered.
Identifier	Gets the full identifier of the item, including group identifiers.
OwnIdentifier	Gets the own identifier of the item, without group identifiers.

Property

ISidebarItem.IsSelected

bool IsSelected { get; set; }

Gets or sets whether the item is currently selected.

Property

ISidebarItem.CurrentRendered

IComponent CurrentRendered { get; }

Gets the component that is currently rendered.

Property

ISidebarItem.Identifier

string Identifier { get; }

Gets the full identifier of the item, including group identifiers.

Property

ISidebarItem.OwnIdentifier

string OwnIdentifier { get; }

Gets the own identifier of the item, without group identifiers.

Methods

Name	Description
RenderClosed	Renders the item for the closed (collapsed) state of the sidebar.
RenderOpen	Renders the item for the open (expanded) state of the sidebar.
Show	Shows the item.
Collapse	Collapses the item.
AddGroupIdentifier	Adds a group identifier prefix to the item's identifier.

Method

ISidebarItem.RenderClosed

IComponent RenderClosed()

Renders the item for the closed (collapsed) state of the sidebar.

Method

ISidebarItem.RenderOpen

IComponent RenderOpen()

Renders the item for the open (expanded) state of the sidebar.

Method

ISidebarItem.Show

void Show()

Shows the item.

Method

ISidebarItem.Collapse

void Collapse()

Collapses the item.

Method

ISidebarItem.AddGroupIdentifier

void AddGroupIdentifier(string groupIdentifier)

Adds a group identifier prefix to the item's identifier.

Sidebar

Description

Sample

API reference

Constructors

Sidebar

Parameters

Properties

Sidebar.IsClosed

Sidebar.IsShifted

Sidebar.ShiftedSidebar

Methods

Sidebar.Secondary

Returns

Sidebar.Sortable

Parameters

Sidebar.AsNavbar

Returns

Sidebar.Closed

Parameters

Returns

Sidebar.Toggle

Returns

Sidebar.ShiftTo

Parameters

Returns

Sidebar.ShiftBack

Returns

Sidebar.OnShiftChanged

Parameters

Returns

Sidebar.AddHeader

Parameters

Returns

Sidebar.InsertAfterHeader

Parameters

Returns

Sidebar.AddContent

Parameters

Returns

Sidebar.InsertAfterContent

Parameters

Returns

Sidebar.RemoveContent

Parameters

Returns

Sidebar.AddFooter

Parameters

Returns

Sidebar.InsertAfterFooter

Parameters

Returns

Sidebar.Clear

Sidebar.ClearHeader

Sidebar.ClearContent

Sidebar.ClearFooter

Sidebar.Render

Returns

Sidebar.AsObservable

Sidebar.SetBoundValue

Sidebar.LoadSorting

Parameters

Sidebar.GetCurrentSorting

Returns

Sidebar.Refresh

Sidebar.OnSortingChanged

Parameters

Sidebar.Search

Parameters

Sidebar.GetOwnIdentifier

Parameters

Returns

Fields

Sidebar.SIDEBAR_TRANSITION_TIME

Sidebar.ROOT_SIDEBAR_FOR_ORDERING

Sidebar.GroupIdentifierSeparator

Properties

SidebarButton.IsSelected

SidebarButton.CurrentRendered

SidebarButton.Identifier