Swipe Area

Headless swipe gesture detection over arbitrary content. Wrap anything in BbSwipeArea and the component hears about swipes across it. The gesture maths runs in the browser, so C# hears one call per completed gesture rather than one per pointer move.

Swipe to Dismiss

Drag a card sideways with a mouse or a finger. OnSwipeMove follows the gesture, OnSwipe fires once when it ends far enough or fast enough to count, and OnSwipeCancel is the signal to undo whatever the move handler was drawing. Treat each move update as the current offset, not a step to accumulate.

Distance or Speed

A swipe commits on distance or on speed. Threshold is the distance, 50px by default. MinVelocity lets a shorter flick through, because a quick 30px flick reads as a swipe to the person making it and a distance-only test throws it away. Set it to double.PositiveInfinity to judge on distance alone. Velocity is measured over the last 100ms of travel, not the whole gesture, so a swipe that stalls before the finger lifts reports a low one.

Axis and touch-action

Axis decides which directions are reported. Horizontal still measures vertical travel but never lets it decide the direction, so a mostly-vertical drag is judged on how far it went sideways. TouchAction is how a swipe stops fighting the page: the browser is told before the gesture begins which directions it may scroll. Calling preventDefault on a pointer event cannot do this reliably — once the browser has handed a touch to the compositor to scroll, the event that would cancel it arrives too late.

Swiping Between Pages

Directions are physical screen directions and do not flip in a right-to-left layout. A component that means “forward” rather than “right” maps the direction itself, so the mapping lives next to the thing being navigated — as it does here.

Disabled, and Cancelling From Code

Disabled abandons a gesture already in progress and ignores new ones. CancelAsync abandons one without reporting it and without raising OnSwipeCancel — for when something else takes over mid-gesture, such as a dialog opening or a list reloading, and the swipe under way no longer refers to anything.

Data Attributes

The root <div> carries its configuration as data attributes, which is how the browser side reads it:

  • [data-axis] — which axis swipes are reported on
  • [data-threshold] — the committing distance in CSS pixels
  • [data-min-velocity] — the committing speed in CSS pixels per millisecond
  • [data-report-move] — present only when OnSwipeMove has a handler, so with none attached the browser sends nothing at all
  • [data-disabled] — present while gestures are ignored

TouchAction is applied as an inline touch-action style rather than a data attribute, because the browser reads it itself.

Right-to-left

Directions are physical and do not mirror. In a right-to-left layout a swipe towards the right edge still reports SwipeDirection.Right. Map “forward” and “back” in the component that uses the gesture, where the reading direction is already known.