MediaPicker

Okno wyboru jednego lub kilku plików z biblioteki, z wyszukiwaniem, folderami i przesyłaniem. Użyj go za ImageField albo dowolnym przyciskiem „wybierz obraz”.

MediaPicker

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: MediaPicker

Nothing chosen yet.

Noc, podgląd: MediaPicker

Nothing chosen yet.

Wysoki kontrast, podgląd: MediaPicker

Nothing chosen yet.

UżycieLink do sekcji Użycie

tsx

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

tsx

<MediaPicker trigger={<Button>Open the library</Button>} title="Media library"
  closeLabel="Close" cancelLabel="Cancel" gridLabel="Images" selectLabel="Select"
  chooseLabel={(n) => `Choose ${n}`} countLabel={(n) => `${n} chosen`}
  items={files} onChoose={setChosen}
  search={{ label: 'Search images', value: query, onChange: setQuery }}
  folders={{ label: 'Folder', chips, selected: folder, onChange: setFolder }} />

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

Okno dialogowe modalne nazwane swoim tytułem: fokus wchodzi do niego i jest w nim zatrzymany, Escape i przycisk zamknięcia z niego wychodzą, a fokus wraca na element otwierający.
Na telefonie wysuwa się od dołu jako arkusz, z akcjami w stopce, która nigdy nie ucieka z widoku.
Wybory przetrwają wyszukiwanie albo zmianę folderu, liczba jest ogłaszana, a przycisk wyboru jest wyłączony, dopóki coś nie zostanie wybrane.
W trybie pojedynczym kliknięcie albo Enter na kafelku wybiera go od razu, a jego pole wyboru tylko zaznacza.
Błąd ładowania jest komunikatem typu assertive z możliwością ponowienia.

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