Segmented

Jeden wybór z dwóch do pięciu, wszystkie widoczne naraz, na przykład tryb widoku albo okres. Dla większej liczby opcji użyj listy wyboru.

PodglądLink do sekcji Podgląd

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

Showing the board view for 28 days.

Showing the board view for 28 days.

Showing the board view for 28 days.

tsx

import { Segmented } from '@skribly/ui/navigation'

tsx

<Segmented label="View" value={view} onChange={setView} options={[
  { value: 'board', label: 'Board' },
  { value: 'list', label: 'List' }
]} />

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

Grupa przycisków opcji: Tab dociera do zaznaczonej opcji, klawisze strzałek przechodzą między opcjami, a Spacja lub Enter wybiera jedną.
Opcje tylko z ikoną przyjmują ariaLabel.
Zaznaczona opcja ma uniesioną powierzchnię, a w trybie wymuszonych kolorów ramkę Highlight.
Opcje się zawijają zamiast przewijać na wąskich ekranach.

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