CommandList

Polecenia ukośnikowe agenta za polem wyszukiwania. Wybierz go w ToolbarMenu albo obok Composer, wszędzie tam, gdzie użytkownik wybiera jedno polecenie do wpisania w sesji.

CommandList

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: CommandList

Noc, podgląd: CommandList

Wysoki kontrast, podgląd: CommandList

UżycieLink do sekcji Użycie

tsx

import { CommandList } from '@skribly/ui/agents'

tsx

<CommandList
  commands={toolbox.commands}
  searchLabel={t('searchCommands')}
  listLabel={t('commands')}
  emptyLabel={(q) => t('noCommand', { q })}
  onRun={(c) => send('/' + c.name)}
/>

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ść

Autocomplete z React Aria z menu: pole zachowuje fokus, gdy klawisze strzałek przesuwają po dopasowaniach, każdy wiersz jest odczytywany po dojściu do niego razem z opisem, a Enter go uruchamia.
Liczba dopasowań jest odczytywana w trybie polite, gdy zapytanie się zmienia.
Nazwy zaczynające się od zapytania są pierwsze.
Długie opisy zawijają się do dwóch linii i są odczytywane w całości.

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