- bit BlazorUI
Home Docs

SwipeTrap

A SwipeTrap is a component that traps swipe actions and triggers corresponding events.

Usage

Basic
Try swipe or drag on the container:

StartX:
StartY:
DiffX:
DiffY:
---
Triggered? False
Trigger direction:
Trigger diffX:
Trigger diffY:
Panel
Open the panel and try to close it by swiping it to the left:

Title

Item1
Item2
Item3
List
Swipe each row to the right to trigger the delete action:

Delete
Item1
Delete
Item2
Delete
Item3
Delete
Item4
Delete
Item5
Delete
Item6
Delete
Item7
Delete
Item8
Delete
Item9
Delete
Item10

Advanced
An illustrative example of integrating this component into a straightforward mobile application.

bit BlazorUI

Swipe left or right

Left Menu

Item1
Item2
Item3

Right Menu

Item1
Item2
Item3

API

BitSwipeTrap parameters
Name
Type
Default value
Description
ChildContent RenderFragment? null The content of the swipe trap.
OnStart EventCallback<BitSwipeTrapEventArgs> The event callback for when the swipe action starts on the container of the swipe trap.
OnMove EventCallback<BitSwipeTrapEventArgs> The event callback for when the swipe action moves on the container of the swipe trap.
OnEnd EventCallback<BitSwipeTrapEventArgs> The event callback for when the swipe action ends on the container of the swipe trap.
OnTrigger EventCallback<BitSwipeTrapTriggerArgs> The event callback for when the swipe action triggers based on the Trigger constraint.
Threshold decimal? null The threshold in pixel for swiping distance that starts the swipe process process which stops the default behavior.
Throttle int? null The throttle time in milliseconds to apply a delay between periodic calls to raise the events (default is 10).
Trigger decimal? null The swiping point (fraction of element's width or an absolute value) to trigger and call the OnTrigger event (default is 0.25m).
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
BitSwipeTrapEventArgs properties
The event arguments of the SwipeTrap events.
Name
Type
Default value
Description
StartX decimal 0 The horizontal start point of the swipe action in pixels.
StartY decimal 0 The vertical start point of the swipe action in pixels.
DiffX decimal 0 The horizontal difference of swipe action in pixels.
DiffY decimal 0 The vertical difference of swipe action in pixels.
BitSwipeTrapTriggerArgs properties
The event arguments of the SwipeTrap trigger event.
Name
Type
Default value
Description
Direction BitSwipeDirection The swipe direction in which the action triggered.
DiffX decimal 0 The horizontal difference of swipe action in pixels.
DiffY decimal 0 The vertical difference of swipe action in pixels.
BitSwipeDirection enum
Name
Value
Description
Right 0 Swipe to right direction.
Left 1 Swipe to left direction.
Top 2 Swipe to top direction.
Bottom 3 Swipe to bottom direction.
BitVisibility enum
Name
Value
Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).
BitDir enum
Name
Value
Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.
  • On this page