CommandPalette provides a fast and efficient way for users to navigate an application and trigger commands using only their keyboard. Inspired by modern editors and tools, it allows users to search through a list of actions and execute them with a single keystroke.
Sample
command-palette-sample.js
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 IEnumerable<CommandPaletteAction> BuildActions()
{
var navigate = new CommandPaletteAction("navigation", "Navigate");
var home = new CommandPaletteAction("home", "Go to Home")
{
ParentId = "navigation",
Perform = () => Toast().Success("Home"),
};
var settings = new CommandPaletteAction("settings", "Open Settings")
{
ParentId = "navigation",
Perform = () => Toast().Success("Settings"),
};
var help = new CommandPaletteAction("help", "Help Center")
{
Perform = () => Toast().Success("Help"),
Shortcut = new[] { "?" },
Keywords = "support docs",
Icon = UIcons.CommentsQuestion,
};
var create = new CommandPaletteAction("new", "Create Item")
{
Perform = () => Toast().Success("Create"),
Shortcut = new[] { "n" },
Section = "Actions",
Icon = UIcons.Plus,
};
var archive = new CommandPaletteAction("archive", "Archive Item")
{
Perform = () => Toast().Success("Archive"),
Section = "Actions",
Icon = UIcons.Archive,
};
return new[]
{
navigate,
home,
settings,
help,
create,
archive,
};
}
private static void Main()
{
var palette = new CommandPalette(BuildActions());
var component = VStack().Children(
TextBlock("Use the button below or press Cmd/Ctrl + K to open the palette.").Small().Secondary().PB(8),
Button("Open Command Palette").Primary().OnClick(() => palette.Open()),
TextBlock("Try navigating with arrow keys, Enter, Esc, and Backspace for nested items.").Small().Secondary().PT(12)
);
document.body.style.overflow = "hidden";
MountCenteredToBody(component);
}
}
}