OptionCard
Kafelki do wyboru z podglądem, dla wyborów ocenianych na oko: motywy, fonty, animacje. Jeden wybór tworzy grupę przycisków opcji, a selectionMode="multiple" grupę pól wyboru.
- OptionCard
- OptionCardGroup
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: OptionCard
ThemeApplies to every window.
Warm paper
Easy at night
AAA
Strongest edges and textInterface fontChoose a font to continue.
AnimationsEach one stops when the system asks for reduced motion.
Noc, podgląd: OptionCard
ThemeApplies to every window.
Warm paper
Easy at night
AAA
Strongest edges and textInterface fontChoose a font to continue.
AnimationsEach one stops when the system asks for reduced motion.
Wysoki kontrast, podgląd: OptionCard
ThemeApplies to every window.
Warm paper
Easy at night
AAA
Strongest edges and textInterface fontChoose a font to continue.
AnimationsEach one stops when the system asks for reduced motion.
UżycieLink do sekcji Użycie
import { OptionCard, OptionCardGroup } from '@skribly/ui/surfaces'<OptionCardGroup label="Theme" value={theme} onChange={setTheme}>
<OptionCard value="light" label="Light" preview={<ThemeSwatch />} selectedLabel="Selected" />
<OptionCard value="dark" label="Dark" preview={<ThemeSwatch />} selectedLabel="Selected" />
</OptionCardGroup>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ść
- Zbudowane na grupach przycisków opcji i pól wyboru z React Aria: Tab wchodzi do grupy, klawisze strzałek przesuwają, Spacja zaznacza, a wyłączone kafelki są pomijane.
- Etykieta nazywa grupę, a każdy kafelek jest nazwany swoją etykietą i opisany swoim opisem; podglądy są ukryte.
- Wybrany kafelek dostaje znacznik, ramkę w kolorze akcentu i słowo z selectedLabel, a w trybie wysokiego kontrastu systemu Windows kolor Highlight.
- Błędy pokazują się pod siatką i są powiązane z grupą.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.