Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  3. Manipulation Surface
  5. Usage

Manipulation Surface

Usage

ManipulationSurface is the manipulation boundary: a surface the user drags, resizes, scrubs, reorders, or presses and holds, where HTML defines no control. It owns one number along a logical axis.
When to use which
NeedUse
Drag, resize, scrub, reorder, or press-and-hold on a structural surface with a value along one axisManipulationSurface
A native control (button, link) with click, hover, and InteractablePropsButton or Link (a future ui-core-style Interactable wrapper is reserved for polymorphic hosts, not manipulation)
File drop onto a targetDropTarget when it ships; not ManipulationSurface
ManipulationSurface is not a button and not the parent of Button or Link.
Window splitter
The parent is the track by default, so a drag across the split container moves the value by the share of the container travelled. In RTL the inline axis grows to the left.
Scrubber
With Absolute tracking the host is the track and the value is the pointer's position, including the press.
Reorder handle
A block-axis slider per row with pixelsPerStep set to the row height. Keep the dragged row where it is in the DOM during the drag and commit the new order on onDraggingChange(false, ...); moving the host releases pointer capture.
Press and hold
onHold fires after holdDelay for a held pointer, or for Enter or Space held.
Out of scope
Two-dimensional drag, drop targets, drag previews, and auto-scroll. A Panel, Slider, RangeSlider, or sortable list builds on this boundary as its own component.
Previous
Loading Indicator / Accessibility
Next
Manipulation Surface / API and Development
On this page
When to use which
Window splitter
Scrubber
Reorder handle
Press and hold
Out of scope