Tesserae - Keyboard Shortcut

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.

API reference

class

KeyboardShortcut

public sealed class KeyboardShortcut : ComponentBase<KeyboardShortcut, HTMLElement>

Renders a keyboard shortcut as styled <kbd> chips (e.g. Ctrl+K).

Constructors

Constructor

KeyboardShortcut

public KeyboardShortcut(params string[] keys)

Initializes a new instance of this class.

Methods

Method

KeyboardShortcut.Render

public override HTMLElement Render()

Renders the component's root HTML element.

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

KeyboardShortcut

Description

API reference

Constructors

KeyboardShortcut

Methods

KeyboardShortcut.Render

Samples

Common Shortcuts

Special Keys

Inline Usage

See also