ChipInput
Swobodny tekst, który zamienia się w chipy z możliwością usunięcia, takie jak tematy albo adresy e-mail. Dla stałej listy opcji użyj MultiSelect.
- ChipInput
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: ChipInput
design
accessibility
a-very-long-topic-name-that-has-to-truncate-inside-its-chip
Press Enter or type a comma after each topic.
Add at least one email address.
Noc, podgląd: ChipInput
design
accessibility
a-very-long-topic-name-that-has-to-truncate-inside-its-chip
Press Enter or type a comma after each topic.
Add at least one email address.
Wysoki kontrast, podgląd: ChipInput
design
accessibility
a-very-long-topic-name-that-has-to-truncate-inside-its-chip
Press Enter or type a comma after each topic.
Add at least one email address.
UżycieLink do sekcji Użycie
import { ChipInput } from '@skribly/ui/forms'<ChipInput label="Topics" removeLabel="Remove" defaultValue={['design']}
duplicateMessage={(chip) => `"${chip}" is already in the list`} />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 albo przecinek dodaje chip, a wklejenie listy ją dzieli.
- Chipy są jednym przystankiem w kolejności Tab: klawisze strzałek przesuwają, Delete lub Backspace usuwa, a każdy przycisk usuwania odczytuje „Remove” i chip.
- Backspace w pustym polu przechodzi do ostatniego chipa; duplikat wywołuje ostrzeżenie typu polite.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.