EffortChips

Jeden wybór spośród kilku poziomów, na przykład jak mocno myśli model. Wybierz go dla od trzech do sześciu krótkich opcji, które mieszczą się w jednej linii; dla większej liczby użyj Select.

EffortChips

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: EffortChips

Effort

Review depth

Effort while the session is busy

Noc, podgląd: EffortChips

Effort

Review depth

Effort while the session is busy

Wysoki kontrast, podgląd: EffortChips

Effort

Review depth

Effort while the session is busy

UżycieLink do sekcji Użycie

tsx

import { EffortChips } from '@skribly/ui/agents'

tsx

<EffortChips label={t('effort')} levels={levels} value={effort} onChange={setEffort} defaultLabel={t('default')} />

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ść

Grupa przycisków opcji z React Aria: Tab wchodzi na wybrany chip, klawisze strzałek przesuwają między chipami, Spacja lub Enter wybiera jeden, a grupa odczytuje swoją etykietę.
Wybrany chip pokazuje ptaszek i podbarwienie, a w trybie wymuszonych kolorów ramkę z wyróżnienia systemowego.
Chipy zawijają się na wąskim ekranie i mają co najmniej 24 px wysokości.

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