Accent color
# SwipeTrap
## Description
A SwipeTrap is a component that traps swipe actions and triggers corresponding events.
## 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. |
| OrientationLock | `BitSwipeOrientation?` | null | Specifies the orientation lock in which the swipe trap allows to trap the swipe actions. |
| 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). |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitSwipeOrientation Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| None | 0 | Not orientation lock for swipe trap. |
| Horizontal | 1 | Horizontal orientation lock of trapping the swipe action. |
| Vertical | 2 | Vertical orientation lock of trapping the swipe action. |
### 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. |
## Sub Classes
### 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. |
## Examples
\n**Basic**:
```razor
```
```csharp
private bool isTriggeredBasic;
BitSwipeTrapEventArgs? swipeTrapEventArgsBasic;
BitSwipeTrapTriggerArgs? swipeTrapTriggerArgsBasic;
private void HandleOnStartBasic(BitSwipeTrapEventArgs args)
{
swipeTrapEventArgsBasic = args;
}
private void HandleOnMoveBasic(BitSwipeTrapEventArgs args)
{
swipeTrapEventArgsBasic = args;
}
private void HandleOnEndBasic(BitSwipeTrapEventArgs args)
{
swipeTrapEventArgsBasic = args;
}
private void HandleOnTriggerBasic(BitSwipeTrapTriggerArgs args)
{
isTriggeredBasic = true;
swipeTrapTriggerArgsBasic = args;
_ = Task.Delay(2000).ContinueWith(_ =>
{
isTriggeredBasic = false;
swipeTrapEventArgsBasic = null;
swipeTrapTriggerArgsBasic = null;
InvokeAsync(StateHasChanged);
});
}
```
\n**Panel**:
```razor
```
```csharp
private decimal diffXPanel;
private bool isPanelOpen;
private void OpenPanel()
{
isPanelOpen = true;
}
private void ClosePanel()
{
isPanelOpen = false;
}
private void HandleOnMovePanel(BitSwipeTrapEventArgs args)
{
diffXPanel = args.DiffX;
}
private void HandleOnEndPanel(BitSwipeTrapEventArgs args)
{
diffXPanel = 0;
}
private void HandleOnTriggerPanel(BitSwipeTrapTriggerArgs args)
{
if (args.Direction == BitSwipeDirection.Left)
{
diffXPanel = 0;
ClosePanel();
}
}
private string GetPanelStyle()
{
return diffXPanel < 0 ? $"transform: translateX({diffXPanel}px)" : "";
}
```
\n**List**:
```razor
Reset
itemsList = Enumerable.Range(0, 10).ToList();
private decimal[] diffXList = Enumerable.Repeat(0m, 10).ToArray();
private void HandleOnMoveList(BitSwipeTrapEventArgs args, int index)
{
diffXList[index] = args.DiffX;
}
private void HandleOnEndList(BitSwipeTrapEventArgs args, int index)
{
if (diffXList[index] < 60)
{
diffXList[index] = 0;
}
}
private async Task HandleOnTriggerList(BitSwipeTrapTriggerArgs args, int index)
{
if (args.Direction == BitSwipeDirection.Right)
{
deletingIndex = index;
listTcs = new();
isListDialogOpen = true;
await listTcs.Task;
isListDialogOpen = false;
diffXList[index] = 0;
deletingIndex = -1;
}
}
private string GetRowStyle(int index)
{
var x = Math.Min(diffXList[index], 60);
return x > 0 ? $"transform: translateX({x}px)" : "";
}
private void HandleOnOkList()
{
if (deletingIndex != -1)
{
itemsList.Remove(deletingIndex);
}
listTcs.SetResult();
}
private void HandleOnCancelList()
{
listTcs.SetResult();
}
private void ResetList()
{
itemsList = Enumerable.Range(0, 10).ToList();
}
```
\n**Advanced**:
```razor
bit BlazorUI
Swipe left or right
```
```csharp
private decimal? diffXPanelAdvanced;
private BitSwipeDirection? direction;
private BitSwipeDirection? panelOpen;
private void OpenPanelAdvanced(BitSwipeDirection swipeDirection)
{
if (panelOpen == swipeDirection) return;
direction = null;
panelOpen = swipeDirection;
diffXPanelAdvanced = 0;
}
private void ClosePanelAdvanced()
{
panelOpen = null;
diffXPanelAdvanced = null;
}
private void HandleOnMovePanelAdvanced(BitSwipeTrapEventArgs args)
{
diffXPanelAdvanced = args.DiffX;
if (Math.Abs(args.DiffX) > 2 || Math.Abs(args.DiffY) > 2)
{
direction = Math.Abs(args.DiffX) > Math.Abs(args.DiffY)
? args.DiffX > 0 ? BitSwipeDirection.Right : BitSwipeDirection.Left
: args.DiffY > 0 ? BitSwipeDirection.Bottom : BitSwipeDirection.Top;
}
else
{
direction = null;
}
}
private void HandleOnEndPanelAdvanced(BitSwipeTrapEventArgs args)
{
if (panelOpen.HasValue)
{
diffXPanelAdvanced = 0;
}
else
{
diffXPanelAdvanced = null;
}
}
private void HandleOnTriggerPanelAdvanced(BitSwipeTrapTriggerArgs args)
{
if (args.Direction == BitSwipeDirection.Left)
{
if (panelOpen.HasValue is false || panelOpen == BitSwipeDirection.Right)
{
OpenPanelAdvanced(BitSwipeDirection.Right);
}
else if (panelOpen == BitSwipeDirection.Left)
{
ClosePanelAdvanced();
}
}
else if (args.Direction == BitSwipeDirection.Right)
{
if (panelOpen.HasValue is false || panelOpen == BitSwipeDirection.Left)
{
OpenPanelAdvanced(BitSwipeDirection.Left);
}
else if (panelOpen == BitSwipeDirection.Right)
{
ClosePanelAdvanced();
}
}
}
private string GetLeftPanelAdvancedStyle()
{
if (panelOpen == BitSwipeDirection.Left && direction != BitSwipeDirection.Left)
{
return "transform: translateX(0px)";
}
else if((panelOpen.HasValue is false && direction == BitSwipeDirection.Right) || (panelOpen == BitSwipeDirection.Left && direction == BitSwipeDirection.Left))
{
return diffXPanelAdvanced switch
{
0 or > 200 => "transform: translateX(0px)",
< 0 and < 200 => $"transform: translateX({diffXPanelAdvanced}px)",
> 0 => $"transform: translateX(calc(-100% + {diffXPanelAdvanced}px))",
_ => string.Empty
};
}
return string.Empty;
}
private string GetRightPanelAdvancedStyle()
{
if (panelOpen == BitSwipeDirection.Right && direction != BitSwipeDirection.Right)
{
return "transform: translateX(0px)";
}
else if ((panelOpen.HasValue is false && direction == BitSwipeDirection.Left) || (panelOpen == BitSwipeDirection.Right && direction == BitSwipeDirection.Right))
{
return diffXPanelAdvanced switch
{
0 or < -200 => "transform: translateX(0px)",
> 0 => $"transform: translateX({diffXPanelAdvanced}px)",
< 0 => $"transform: translateX(calc(100% - {(-1 * diffXPanelAdvanced)}px))",
_ => string.Empty
};
}
return string.Empty;
}
```StartX: @swipeTrapEventArgs?.StartX
StartY: @swipeTrapEventArgs?.StartY
DiffX: @swipeTrapEventArgs?.DiffX
DiffY: @swipeTrapEventArgs?.DiffY
---
Triggered? @isTriggered
Trigger direction: @swipeTrapTriggerArgs?.Direction
Trigger diffX: @swipeTrapTriggerArgs?.DiffX
Trigger diffY: @swipeTrapTriggerArgs?.DiffY
Title
Item1
Item2
Item3
@foreach (int idx in itemsList)
{
var i = idx;
}
Delete
Item@(i + 1)
Left Menu
Item1
Item2
Item3
Right Menu
Item1
Item2
Item3