ColorInput

Kolor jako wartość szesnastkowa, wpisana albo wybrana. Gotowe kolory utrzymują wybór w obrębie palety, na przykład kolorów etykiet albo marki.

ColorInput

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: ColorInput

Label colour

Used for the label dot and its badge.

Accent

Noc, podgląd: ColorInput

Label colour

Used for the label dot and its badge.

Accent

Wysoki kontrast, podgląd: ColorInput

Label colour

Used for the label dot and its badge.

Accent

UżycieLink do sekcji Użycie

tsx

import { ColorInput } from '@skribly/ui/forms'

tsx

<ColorInput label="Label colour" pickerLabel="Pick a colour" hueLabel="Hue"
  defaultValue="#d97706" swatches={['#d97706', '#2563eb']} swatchesLabel="Presets" />

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

Pole szesnastkowe przyjmuje wpisywanie i klawisze strzałek.
Przycisk próbki otwiera okno z dwuwymiarowym obszarem koloru, suwakiem odcienia i gotowymi kolorami, wszystko obsługiwane z klawiatury; gotowe kolory są listą wyboru nazwaną przez wymagane swatchesLabel, a React Aria nazywa każdy kolor słowami.
Tekst szesnastkowy podaje wartość, więc próbka nigdy nie jest jedyną wskazówką.

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