Playground GitHub npm

Command

Command palette (⌘K) — modal search over an action list.

ui overlay

Preview

Installation

npx slintcn@latest add command

Usage

import { Command, CommandItem } from "slintcn/components/command.slint";

// Mount as the LAST child of Window so the backdrop covers everything.
Command {
    width: parent.width;
    height: parent.height;
    open <=> palette-open;
    items: [
        { label: "New file",   id: "file.new",   hint: "⌘N" },
        { label: "Open file…", id: "file.open",  hint: "⌘O" },
        { label: "Save",       id: "file.save",  hint: "⌘S" },
    ];
    query <=> query;
    selected(id) => { /* dispatch by id */ }
}

Properties

open in-out bool

Two-way; consumer sets true to open, slintcn sets false on dismiss.

items in [CommandItem]

Items shown in the palette. Each `id` is what `selected` fires with.

query in-out string

Two-way; current search text.

highlighted-index in-out int

Row that Enter selects; consumers rarely set this directly.

placeholder in string

Hint shown in the search field when empty.

selected callback (string)

Fired with the chosen item's id when the user picks one.

dismissed callback ()

Fired when the palette closes for any reason.

API

Accessibility
focusableyes
keyboardtext entryArrow keysEnter
Escapedismisses

Dependencies

input

Installed automatically as transitive dependencies of slintcn add command.