CommandPalette

Jedno wyszukiwanie dla każdego widoku i każdej akcji aplikacji, otwierane skrótem Cmd K lub Ctrl K. Wybierz ją dla aplikacji z wieloma miejscami do odwiedzenia; do treści użyj GlobalSearch.

CommandPalette

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: CommandPalette

Or press Ctrl K or ⌘ K.

Noc, podgląd: CommandPalette

Or press Ctrl K or ⌘ K.

Wysoki kontrast, podgląd: CommandPalette

Or press Ctrl K or ⌘ K.

Zobacz w działaniuLink do sekcji Zobacz w działaniu

Wpisz, aby filtrować, strzałkami się poruszaj, Enterem uruchamiaj.

UżycieLink do sekcji Użycie

tsx

import { CommandPalette } from '@skribly/ui/search'

tsx

<CommandPalette isOpen={open} onOpenChange={setOpen} shortcut commands={commands}
  label="Command palette" searchLabel="Search commands" listLabel="Commands" closeLabel="Close"
  emptyLabel={(q) => `Nothing matches “${q}”.`} />

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Okno dialogowe modalne: fokus zaczyna się w polu wyszukiwania, zostaje wewnątrz, dopóki okno jest otwarte, i wraca na element otwierający po zamknięciu.
Wpisywanie filtruje przybliżenie po etykiecie, podpowiedzi i słowach kluczowych, a dopasowane litery są zaznaczone.
Strzałka w górę i w dół przesuwa, Enter uruchamia, Escape czyści pole, a potem zamyka okno.
Polecenia są pozycjami menu nazwanymi najpierw etykietą, potem podpowiedzią, ze skrótem jako klawiszami; wyłączone są ogłaszane jako takie.
Na wąskich ekranach okno staje się arkuszem na pełny ekran z przyciskiem zamknięcia.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.