Tesserae - Sidebar

Description

A sidebar navigation component

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

API reference

class

Sidebar

public sealed class Sidebar : IComponent

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

Constructors

Properties

Methods

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

class

SidebarButton

public class SidebarButton : ISearchableSidebarItem

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

Properties

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

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.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

public SidebarButton Tooltip(string text)

Sets a tooltip for the closed state button.

Parameters

text: The tooltip text.

Returns

The current instance of the type.

Method

SidebarButton.Tooltip

public SidebarButton Tooltip(IComponent tooltip)

Sets a tooltip component for the closed state button.

Parameters

tooltip: The tooltip component.

Returns

The current instance of the type.

Method

SidebarButton.Tooltip

public SidebarButton Tooltip(Func<IComponent> tooltip)

Sets a tooltip generator function for the closed state button.

Parameters

tooltip: The tooltip generator function.

Returns

The current instance of the type.

Method

SidebarButton.OpenedTooltip

public SidebarButton OpenedTooltip(string text)

Sets a tooltip for the open state button.

Parameters

text: The tooltip text.

Returns

The current instance of the type.

Method

SidebarButton.OpenedTooltip

public SidebarButton OpenedTooltip(IComponent tooltip)

Sets a tooltip component for the open state button.

Parameters

tooltip: The tooltip component.

Returns

The current instance of the type.

Method

SidebarButton.OpenedTooltip

public SidebarButton OpenedTooltip(Func<IComponent> tooltip)

Sets a tooltip generator function for the open state button.

Parameters

tooltip: The tooltip generator function.

Returns

The current instance of the type.

Method

SidebarButton.OnClick

public SidebarButton OnClick(Action action)

Adds a click event handler to the button.

Parameters

action: The event handler action.

Returns

The current instance of the type.

Method

SidebarButton.OnOpenIconClick

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

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

Parameters

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.OnOpenIconClick

public SidebarButton OnOpenIconClick(Action action)

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

Parameters

action: The event handler action.

Returns

The current instance of the type.

Method

SidebarButton.OnContextMenu

public SidebarButton OnContextMenu(Action action)

Adds a context menu event handler to the button.

Parameters

action: The event handler action.

Returns

The current instance of the type.

Method

SidebarButton.OnClick

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

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

Parameters

action: The event handler action.

Returns

The current instance of the type.

Method

SidebarButton.OnContextMenu

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

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

Parameters

action: The event handler action.

Returns

The current instance of the type.

Method

SidebarButton.SetIcon

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

Sets the icon for the button.

Parameters

icon: The icon.
color: The color of the icon.
weight: The weight of the icon.

Returns

The current instance of the type.

Method

SidebarButton.SetIcon

public SidebarButton SetIcon(Emoji icon)

Sets an emoji icon for the button.

Parameters

icon: 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

class

SidebarNav

public class SidebarNav : ISearchableSidebarItem

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

Properties

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

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

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

Adds a click event handler to the open header icon.

Parameters

action: The event handler action.

Returns

The current instance of the type.

Method

SidebarNav.OnOpenIconClick

public SidebarNav OnOpenIconClick(Action action)

Adds a click event handler to the open header icon.

Parameters

action: The event handler action.

Returns

The current instance of the type.

Method

SidebarNav.OnClick

public SidebarNav OnClick(Action action)

Adds a click event handler to the navigation header.

Parameters

action: The event handler action.

Returns

The current instance of the type.

Method

SidebarNav.OnClick

public SidebarNav OnClick(Action<SidebarNav> action)

Adds a click event handler with SidebarNav argument.

Parameters

action: The event handler action.

Returns

The current instance of the type.

Method

SidebarNav.OnClick

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

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

Parameters

action: The event handler action.

Returns

The current instance of the type.

Method

SidebarNav.OnContextMenu

public SidebarNav OnContextMenu(Action action)

Adds a context menu event handler.

Parameters

action: The event handler action.

Returns

The current instance of the type.

Method

SidebarNav.OnContextMenu

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

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

Parameters

action: 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

Event

SidebarNav._onSortingChanged

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

Event fired when sorting changes within the navigation.

class

SidebarSearchBox

public class SidebarSearchBox : ISidebarItem

class

SidebarCommand

public class SidebarCommand : IComponent

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

Methods

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

public SidebarCommand Tooltip(string text)

Sets a tooltip for the command.

Parameters

text: The tooltip text.

Returns

The current instance of the type.

Method

SidebarCommand.Tooltip

public SidebarCommand Tooltip(IComponent tooltip)

Sets a tooltip component for the command.

Parameters

tooltip: The tooltip component.

Returns

The current instance of the type.

Method

SidebarCommand.Tooltip

public SidebarCommand Tooltip(Func<IComponent> tooltip)

Sets a tooltip generator function for the command.

Parameters

tooltip: 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

public SidebarCommand OnClick(Action action)

Adds a click event handler.

Parameters

action: The event handler action.

Returns

The current instance of the type.

Method

SidebarCommand.OnContextMenu

public SidebarCommand OnContextMenu(Action action)

Adds a context menu event handler.

Parameters

action: The event handler action.

Returns

The current instance of the type.

Method

SidebarCommand.OnClick

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

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

Parameters

action: The event handler action.

Returns

The current instance of the type.

Method

SidebarCommand.OnContextMenu

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

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

Parameters

action: The event handler action.

Returns

The current instance of the type.

Method

SidebarCommand.SetIcon

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

Sets the icon for the command.

Parameters

icon: The icon.
color: The color of the icon.
weight: The weight of the icon.

Returns

The current instance of the type.

Method

SidebarCommand.SetIcon

public SidebarCommand SetIcon(Emoji icon)

Sets an emoji icon for the command.

Parameters

icon: 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.

Properties

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

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.

Constructors

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

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

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.

Constructors

Constructor

SidebarBadge

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

Initializes a new instance of the SidebarBadge class.

Parameters

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

Constructor

SidebarBadge

public SidebarBadge(string badge, UIcons badgeIcon)

Initializes a new instance of the SidebarBadge class.

Parameters

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

Constructor

SidebarBadge

public SidebarBadge(string badge)

Initializes a new instance of the SidebarBadge class.

Parameters

badge: The text content of the badge.

Constructor

SidebarBadge

public SidebarBadge(ISidebarIcon image)

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

Parameters

image: The image icon.

Methods

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

public SidebarBadge Tooltip(string text)

Sets a tooltip for the badge.

Parameters

text: The tooltip text.

Returns

The current instance of the type.

Method

SidebarBadge.Tooltip

public SidebarBadge Tooltip(IComponent tooltip)

Sets a tooltip component for the badge.

Parameters

tooltip: The tooltip component.

Returns

The current instance of the type.

Method

SidebarBadge.Tooltip

public SidebarBadge Tooltip(Func<IComponent> tooltip)

Sets a tooltip generator function for the badge.

Parameters

tooltip: The tooltip generator function.

Returns

The current instance of the type.

Method

SidebarBadge.SetIcon

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

Sets the icon for the badge.

Parameters

icon: The icon.
color: The color of the icon.
weight: The weight of the icon.

Returns

The current instance of the type.

Method

SidebarBadge.SetIcon

public SidebarBadge SetIcon(Emoji icon)

Sets an emoji icon for the badge.

Parameters

icon: 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.

Sample

sidebar-sample.js

using System;
using System.Collections.Generic;
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 sidebar = Sidebar();

            var searchBox = new SidebarSearchBox("search", "Search Sidebar...");
            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);
            }
        }
    }
}

Sidebar

Description

API reference

Constructors

Sidebar

Parameters

Properties

Sidebar.IsClosed

Methods

Sidebar.Secondary

Returns

Sidebar.Sortable

Parameters

Sidebar.AsNavbar

Returns

Sidebar.Closed

Parameters

Returns

Sidebar.Toggle

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.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

SidebarButton.OwnIdentifier

Methods

SidebarButton.AddGroupIdentifier

SidebarButton.Show

SidebarButton.Collapse

SidebarButton.NotSortable

Returns

SidebarButton.ClearProgress

Returns

SidebarButton.Progress

Parameters

Returns

SidebarButton.SetText