CommandPalette

⌘K: jede Seite und Aktion, gruppiert; verschachtelte Seiten; asynchrone Gruppen mit einer leisen Fortschrittslinie.

function Basic() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button leadingIcon={icons.search} onClick={() => setOpen(true)} size="lg">
        Search
      </Button>
      <CommandPalette open={open} onOpenChange={setOpen} groups={groups} hotkey={false} />
    </>
  );
}

import { CommandPalette } from "@logicplanes/kaeso-ui";

Props

defaultQuery
string
Mit dieser Suchanfrage beginnen (Dokumentation).
emptyText
ReactNode
Standardmäßig „Keine Ergebnisse“ in der Sprache des LocaleProvider.
groups
CommandGroup[]
Die Befehle, in Gruppen mit je einer Überschrift.
hotkey
boolean
Überall mit ⌘K / Strg+K öffnen (standardmäßig an).
inline
boolean
Ohne Portal rendern, für Dokumentation und Zustandsmatrizen.
keyHints
boolean
Eine Fußzeile mit den Tasten (↑ ↓ zum Wechseln, ↵ zum Öffnen, Esc zum Schließen). Standardmäßig aus: Tastenhinweise nur, wo gewünscht.
onOpenChange
((open: boolean) => void)
Wird aufgerufen, wenn es sich öffnet oder schließt.
onQueryChange
((query: string) => void)
Wird aufgerufen, wenn sich die Suchanfrage ändert, für asynchrone Gruppen.
open
boolean
Ob es geöffnet ist, bei gesteuertem Zustand.
placeholder
string
Standardmäßig „Suchen oder Befehl ausführen“ in der Sprache des LocaleProvider.