MediaGrid

Pliki folderu jako kafelki albo lista, z zaznaczaniem do akcji zbiorczych, akcją na plik, przeciąganiem do zmiany kolejności i plikami upuszczanymi z pulpitu. Wybierz go dla każdego widoku biblioteki; do jednego pliku poza listą użyj samego MediaTile.

MediaGrid

UżycieLink do sekcji Użycie

tsx

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

tsx

<MediaGrid aria-label="Files in Holidays" items={files} view="grid"
  selectionMode="multiple" selectedKeys={selected} onSelectionChange={setSelected}
  selectLabel="Select" onAction={openEditor}
  renderActions={(file) => <IconButton label={`Edit ${file.name}`} …/>}
  onMove={reorder} dragLabel={(file) => `Drag ${file.name}`}
  isLoading={loading} loadingLabel="Loading files"
  emptyState={<EmptyState title="This folder is empty" />} />

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

Siatka React Aria z jednym przystankiem w kolejności Tab.
Klawisze strzałek przesuwają między kafelkami w obu kierunkach, wpisanie nazwy pliku przeskakuje do niego, Spacja albo pole wyboru zaznacza, Enter uruchamia akcję, a Tab dociera do przycisków wewnątrz kafelka z fokusem.
Pola wyboru są odczytywane jako „Select” i nazwa pliku.
Przeciąganie działa wskaźnikiem, klawiszem Enter na uchwycie i klawiszami strzałek oraz z czytnikami ekranu.
Ładowanie jest statusem zajętości z kafelkami-szkieletami, pusty stan mówi, dlaczego jest pusty, uwagi, takie jak brak tekstu alternatywnego, mają słowo i znak, a zaznaczone kafelki dostają ramkę, nie tylko podbarwienie.
Kafelki układają się od jednej kolumny przy 320 px.

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

MediaGrid

PodglądLink do sekcji Podgląd

Dzień, podgląd: MediaGrid

Noc, podgląd: MediaGrid

Wysoki kontrast, podgląd: MediaGrid

UżycieLink do sekcji Użycie

DostępnośćLink do sekcji Dostępność