Tesserae

KeyboardShortcut

Description

Render keyboard shortcuts as styled key chips

KeyboardShortcut renders one or more key names as styled chips that look like physical keyboard keys. It automatically adapts modifier key labels to the current OS (⌘ on macOS, Ctrl on Windows/Linux) and handles special keys like Enter (↵), Escape, and arrow keys.

Samples

Common Shortcuts

keyboard-shortcut-common-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = VStack().Gap(12.px()).Children(
                HStack().AlignItems(ItemAlign.Center).Gap(16.px()).Children(
                    TextBlock("Search").W(120.px()).Small(),
                    KeyboardShortcut("Ctrl", "K")
                ),
                HStack().AlignItems(ItemAlign.Center).Gap(16.px()).Children(
                    TextBlock("Save").W(120.px()).Small(),
                    KeyboardShortcut("Ctrl", "S")
                ),
                HStack().AlignItems(ItemAlign.Center).Gap(16.px()).Children(
                    TextBlock("Undo").W(120.px()).Small(),
                    KeyboardShortcut("Ctrl", "Z")
                ),
                HStack().AlignItems(ItemAlign.Center).Gap(16.px()).Children(
                    TextBlock("Redo").W(120.px()).Small(),
                    KeyboardShortcut("Ctrl", "Shift", "Z")
                ),
                HStack().AlignItems(ItemAlign.Center).Gap(16.px()).Children(
                    TextBlock("Copy").W(120.px()).Small(),
                    KeyboardShortcut("Ctrl", "C")
                ),
                HStack().AlignItems(ItemAlign.Center).Gap(16.px()).Children(
                    TextBlock("Select all").W(120.px()).Small(),
                    KeyboardShortcut("Ctrl", "A")
                ),
                HStack().AlignItems(ItemAlign.Center).Gap(16.px()).Children(
                    TextBlock("Close / Cancel").W(120.px()).Small(),
                    KeyboardShortcut("Escape")
                ),
                HStack().AlignItems(ItemAlign.Center).Gap(16.px()).Children(
                    TextBlock("Confirm").W(120.px()).Small(),
                    KeyboardShortcut("Enter")
                )
            );

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

Special Keys

keyboard-shortcut-special-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = HStack().Gap(16.px()).AlignItems(ItemAlign.Center).Children(
                KeyboardShortcut("ArrowUp"),
                KeyboardShortcut("ArrowDown"),
                KeyboardShortcut("ArrowLeft"),
                KeyboardShortcut("ArrowRight"),
                KeyboardShortcut("Tab"),
                KeyboardShortcut("Backspace"),
                KeyboardShortcut("Delete")
            );

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

Inline Usage

keyboard-shortcut-inline-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = HStack().AlignItems(ItemAlign.Center).Gap(4.px()).Children(
                TextBlock("Press").Small(),
                KeyboardShortcut("Ctrl", "K"),
                TextBlock("to open the command palette, or").Small(),
                KeyboardShortcut("Escape"),
                TextBlock("to dismiss it.").Small()
            );

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