List reordering

Przekaż hooki przeciągania i upuszczania z React Aria, aby pozwolić zmieniać kolejność pozycji myszą, dotykiem lub klawiaturą.

List
ListItem

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: List reordering

Atlas

Beacon notifications service, with a deliberately long name to show wrapping

Comet

Noc, podgląd: List reordering

Atlas

Beacon notifications service, with a deliberately long name to show wrapping

Comet

Wysoki kontrast, podgląd: List reordering

Atlas

Beacon notifications service, with a deliberately long name to show wrapping

Comet

UżycieLink do sekcji Użycie

tsx

import { List, ListItem } from '@skribly/ui/data'

tsx

const { dragAndDropHooks } = useDragAndDrop({ getItems, onReorder, renderDropIndicator })
<List aria-label="Release order" items={list.items} dragAndDropHooks={dragAndDropHooks}>
  {(item) => <ListItem id={item.id} title={item.name} />}
</List>

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

Każda pozycja dostaje uchwyt przeciągania o celu 24 px.
Z klawiatury ustaw fokus na uchwycie i naciśnij Enter, aby podnieść pozycję, przesuń klawiszami strzałek i naciśnij Enter, aby upuścić; React Aria ogłasza każdy krok, a Escape anuluje.

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