ToolbarMenu

Mały panel z przycisku paska narzędzi dla wyborów, takich jak model, wtyczki albo polecenia ukośnikowe. Wybierz go, gdy wybór potrzebuje więcej niż jednej kontrolki; dla zwykłej listy akcji użyj menu.

ToolbarMenu

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: ToolbarMenu

Noc, podgląd: ToolbarMenu

Wysoki kontrast, podgląd: ToolbarMenu

UżycieLink do sekcji Użycie

tsx

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

tsx

<ToolbarMenu label={t('changeModel')} icon={<Cpu />} value={model.label} title={t('model')}>
  {(close) => <RadioGroup label={t('model')} value={model.id} onChange={(id) => (pick(id), close())}>…</RadioGroup>}
</ToolbarMenu>

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

Niemodalne okno dialogowe z React Aria: element otwierający zgłasza, że jest rozwinięty, fokus przechodzi do panelu, Escape albo kliknięcie poza nim go zamyka, a fokus wraca na element otwierający.
Panel jest nazwany swoim tytułem albo przez label.
Na ekranach węższych niż 640 px staje się arkuszem wzdłuż dolnej krawędzi, który przewija się w środku.

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