ImageField

Pole formularza przechowujące obrazy z biblioteki w kolejności, na przykład okładkę albo galerię. Wybierz je zawsze, gdy formularz zapisuje odwołania do obrazów; do dodawania połącz je z MediaPicker.

ImageField

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: ImageField

Noc, podgląd: ImageField

Wysoki kontrast, podgląd: ImageField

UżycieLink do sekcji Użycie

tsx

import { ImageField } from '@skribly/ui/media'

tsx

<ImageField label="Gallery" value={images} onChange={setImages}
  addLabel="Add images" onAdd={openPicker} name="gallery"
  itemLabel={(file, i, n) => `Image ${i + 1} of ${n}: ${file.name}`}
  removeLabel={(file) => `Remove ${file.name}`}
  moveEarlierLabel={(file) => `Move ${file.name} earlier`}
  moveLaterLabel={(file) => `Move ${file.name} later`}
  movedLabel={(file, i, n) => `${file.name} is now ${i + 1} of ${n}`}
  errorMessage={error} />

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

Zestaw pól nazwany swoją etykietą.
Każdy obraz jest wierszem siatki nazwanym razem z jego pozycją, a jego przyciski osiąga się klawiszem Tab.
Przesunięcie ogłasza nową pozycję i zostawia fokus na przycisku przesunięcia nawet na końcach; usunięcie przenosi fokus na następny obraz albo przycisk dodawania.
Uchwyty przeciągania dodają przeciąganie z klawiatury i czytnika ekranu.
Błąd jest powiązany z przyciskiem dodawania przez aria-describedby i aria-invalid, a lista dostaje przerywany obrys, więc widać go także bez koloru.
Użyj requiredLabel, aby odczytywane było „wymagane”.

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