DropdownMenu

Lista akcji za przyciskiem. Wiersze MenuItem przyjmują ikonę, opis, skrót i ton niebezpieczeństwa; wybierz menu dla poleceń, a nie dla wyboru wartości formularza.

DropdownMenu
MenuItem

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: DropdownMenu

Noc, podgląd: DropdownMenu

Wysoki kontrast, podgląd: DropdownMenu

UżycieLink do sekcji Użycie

tsx

import { DropdownMenu, MenuItem } from '@skribly/ui/overlays'

tsx

<DropdownMenu trigger={<IconButton label="Help"><CircleHelp /></IconButton>} onAction={run}>
  <MenuItem id="guide" icon={<LifeBuoy />}>Start the guide</MenuItem>
  <MenuItem id="delete" tone="danger">Delete</MenuItem>
</DropdownMenu>

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

Enter, Spacja lub strzałka w dół otwiera menu na pierwszym wierszu, strzałka w górę na ostatnim.
Strzałki przesuwają, wpisywanie przeskakuje do wiersza, Enter go uruchamia, a Escape zamyka menu.
Menu jest nazwane przez element otwierający, a każdy wiersz całym swoim tekstem, etykietą na początku, więc opis jest odczytywany razem z nią; ikony są ukryte.
Wiersze mają co najmniej 32 px wysokości.

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