Select
Jeden wybór z listy do około piętnastu opcji. Dla większej liczby albo gdy ludzie wiedzą, co wpisać, lepsze jest pole kombinowane z wyszukiwaniem.
- Select
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: Select
Priority
Urgent needs an owner.
StatusPick a status that fits the board.
Board
Noc, podgląd: Select
Priority
Urgent needs an owner.
StatusPick a status that fits the board.
Board
Wysoki kontrast, podgląd: Select
Priority
Urgent needs an owner.
StatusPick a status that fits the board.
Board
UżycieLink do sekcji Użycie
import { Select } from '@skribly/ui/forms'<Select label="Priority" placeholder="Choose a priority"
items={[{ id: 'low', label: 'Low' }, { id: 'high', label: 'High' }]} />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ść
- Spacja, Enter lub klawisze strzałek otwierają listę; wpisanie litery przeskakuje do opcji, także gdy lista jest zamknięta.
- Wybrana opcja ma znacznik i pogrubiony tekst, a nie tylko kolor.
- Wyłączone opcje zostają na liście i są pomijane.
- Lista ma szerokość elementu otwierającego i nigdy nie jest szersza niż ekran.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.