DragHandle

Uchwyt, który przeciąga pozycję w sortowalnym GridList, Table albo Tree z React Aria. Zawsze łącz przeciąganie z drugim sposobem zmiany kolejności, takim jak NudgeButtons, dla osób, które nie mogą przeciągać.

DragHandle

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: DragHandle

Home

Changelog

Blog

About

Contact

Noc, podgląd: DragHandle

Home

Changelog

Blog

About

Contact

Wysoki kontrast, podgląd: DragHandle

Home

Changelog

Blog

About

Contact

UżycieLink do sekcji Użycie

tsx

import { DragHandle } from '@skribly/ui/actions'

tsx

<GridListItem textValue={page.name}>
  <DragHandle label={`Drag ${page.name}`} />
  {page.name}
</GridListItem>

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

Uchwyt wypełnia slot przeciągania pozycji, więc React Aria daje mu przeciąganie z klawiatury (Enter, aby podnieść, strzałki, aby wybrać miejsce, Enter, aby upuścić, Escape, aby anulować) i odczytuje na głos instrukcje oraz pozycję upuszczenia.
Cel ma 24 px w kwadracie, choć sam uchwyt jest mniejszy.

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