Swipe directions
Swipe your finger in different directions to see how the component works.
None
<MudSwipeArea OnSwipeEnd="@((e) => _swipeDirection = e.SwipeDirection)" Style="width: 100%; height: 300px"> <MudText Typo="@Typo.body1">@_swipeDirection</MudText> </MudSwipeArea>
@code {
SwipeDirection _swipeDirection;
}
Prevent default browser behavior
Browser will not scroll when PreventDefault is set to true.
None - Swiped: px
<MudSwipeArea @ref="_swipeArea" OnSwipeEnd="HandleSwipeEnd" Style="width: 100%; height: 300px" Sensitivity="_sensitivity" PreventDefault="@_preventDefault"> <MudText Typo="@Typo.body1">@($"{_swipeDirection} - Swiped: {_swipeDelta}px")</MudText> </MudSwipeArea> <MudSwitch @bind-Value="_preventDefault" Color="Color.Primary">Prevent Default</MudSwitch> <MudNumericField @bind-Value="_sensitivity" Label="Sensitivity" Min="0" />
@code { MudSwipeArea _swipeArea; SwipeDirection _swipeDirection; bool _preventDefault = true; int _sensitivity = 100; double? _swipeDelta; private void HandleSwipeEnd(SwipeEventArgs args) { _swipeDirection = args.SwipeDirection; _swipeDelta = args.SwipeDelta; } }