Swipe Handler

The Swipe Handler is a utility component that registers events and logic to implement swipe-to-dismiss functionality. It enables touch-based interactions for dismissing elements such as bottom sheets, side menus, or other interactive containers through natural swipe gestures.

Handles swipe gestures for dismissible elements

Architecture

sc-swipe-handler

Reference

  • Swipe Handler

    This is a non-visual component that manages swipe interactions within a specified container. It listens for touch events and controls the movement and dismissal behavior of the target element based on configured parameters.

    • Attributes

      • container-id
        string
        /
        default: -

        Specifies the ID of the container element that will receive the swipe functionality. This attribute is required for the component to function properly.

      • directions
        enum[]
        /
        default: bottom

        Defines the allowed swipe directions for the element. Multiple directions can be specified to enable different dismissal paths. Each direction affects how the element responds to swipe gestures.

      • disabled
        boolean
        /
        default: false

        When set to true, the swipe functionality is disabled, and the element will not respond to swipe gestures.

      • dismiss-factor
        number
        /
        default: 0.5

        Determines the threshold distance required for a successful dismissal, expressed as a percentage of the element's size. A value of 0.5 means the element must be swiped 50% of its height or width (depending on direction) to trigger dismissal.

      • dismiss-speed
        number
        /
        default: 1

        Defines the minimum swipe velocity (in pixels per millisecond) required to trigger a dismissal. This lets quick gestures dismiss the element even if the dismiss-factor threshold hasn't been met.

    • Events

      • onSnapBack

        Triggered when a swipe gesture ends without meeting the dismissal criteria, indicating that the element should return to its original position.

      • onSwipeOut

        Triggered when a successful dismissal occurs, either by exceeding the dismiss-factor threshold or meeting the dismiss-speed requirement.

made for toddle