ButtonGroup
Trzyma powiązane przyciski razem. Spaced dla zestawów osobnych akcji, attached dla wyglądu segmentowego, toolbar dla paska narzędzi, a stackOnNarrow dla stopek formularzy, które na telefonie mają zająć całą szerokość.
- ButtonGroup
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: ButtonGroup
Spaced
Attached toolbar
Vertical, attached
Form footer, stacks on a phone
Noc, podgląd: ButtonGroup
Spaced
Attached toolbar
Vertical, attached
Form footer, stacks on a phone
Wysoki kontrast, podgląd: ButtonGroup
Spaced
Attached toolbar
Vertical, attached
Form footer, stacks on a phone
UżycieLink do sekcji Użycie
import { ButtonGroup } from '@skribly/ui/actions'<ButtonGroup label="Formatting" toolbar attached>
<ToggleButton aria-label="Bold"><Bold aria-hidden /></ToggleButton>
<ToggleButton aria-label="Italic"><Italic aria-hidden /></ToggleButton>
</ButtonGroup>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ść
- Zwykła grupa ma role="group" i label jako nazwę; każdy przycisk zachowuje własny przystanek Tab.
- Pasek narzędzi jest jednym przystankiem Tab: strzałka w lewo i w prawo (w górę i w dół w układzie pionowym) przechodzi między przyciskami, odbita w tekście od prawej do lewej.
- Grupy zawijają się przy wąskich szerokościach zamiast się przewijać.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.