Swipe Area - MudBlazor

API

<MudSwipeArea>

Swipe directions

Swipe your finger in different directions to see how the component works (LeftToRight, RightToLeft, TopToBottom, BottomToTop).

None

<MudSwipeArea OnSwipeEnd="@(e => _swipeDirection = e.SwipeDirection)" Style="width: 100%; height: 300px; background-color:var(--mud-palette-surface)">
    <MudText Style="user-select: none;" Typo="@Typo.body1">@_swipeDirection</MudText>
</MudSwipeArea>

@code {
    private SwipeDirection _swipeDirection;
}

Real Time Swipe

You can control the process in real time with the OnSwipeMove event. This event uses the MultiDimensionSwipeEventArgs parameter instead of SwipeEventArgs for increased precision.

None None

Left: 0

Right: 0

Top: 0

Bottom: 0

*Value resets if swipe goes out of area.

<MudSwipeArea @ref="@_swipeArea" Class="mud-background border-dashed border-2 mud-border-primary" Style="width: 100%; height: 300px" OnSwipeMove="HandleSwipeMove" OnSwipeEnd="@Reset" OnSwipeLeave="@OnSwipeLeave">
    <MudText Class="pa-2" Style="user-select: none;" Typo="@Typo.body1">@($"{_swipeDirection[1].ToString()} {_swipeDirection[0].ToString()}")</MudText>
</MudSwipeArea>

<MudStack Class="mud-height-full mud-width-full" Row Wrap="Wrap.Wrap" Justify="Justify.Center">
    <MudChip T="string" Style="user-select: none;" Color="Color.Primary">Left: @_leftSwipe</MudChip>
    <MudChip T="string" Style="user-select: none;" Color="Color.Primary">Right: @_rightSwipe</MudChip>
    <MudChip T="string" Style="user-select: none;" Color="Color.Primary">Top: @_topSwipe</MudChip>
    <MudChip T="string" Style="user-select: none;" Color="Color.Primary">Bottom: @_bottomSwipe</MudChip>
</MudStack>
<MudText Align="Align.Center">*Value resets if swipe goes out of area.</MudText>

@code {
    private double _leftSwipe;
    private double _rightSwipe;
    private double _topSwipe;
    private double _bottomSwipe;
    private MudSwipeArea _swipeArea = null!;
    private List<SwipeDirection> _swipeDirection = [SwipeDirection.None, SwipeDirection.None];

    private void HandleSwipeMove(MultiDimensionSwipeEventArgs e)
    {
        _swipeDirection = [e.SwipeDirections[0], e.SwipeDirections[1]];
        for (int i = 0; i < e.SwipeDirections.Count; i++)
        {
            if (e.SwipeDirections[i] == SwipeDirection.LeftToRight)
            {
                _rightSwipe += Math.Abs(e.SwipeDeltas[i] ?? 0);
            }
            else if (e.SwipeDirections[i] == SwipeDirection.RightToLeft)
            {
                _leftSwipe += Math.Abs(e.SwipeDeltas[i] ?? 0);
            }
            else if (e.SwipeDirections[i] == SwipeDirection.BottomToTop)
            {
                _topSwipe += Math.Abs(e.SwipeDeltas[i] ?? 0);
            }
            else if (e.SwipeDirections[i] == SwipeDirection.TopToBottom)
            {
                _bottomSwipe += Math.Abs(e.SwipeDeltas[i] ?? 0);
            }
        }
    }

    private void OnSwipeLeave()
    {
        _swipeArea.Cancel();
        Reset();
    }

    private void Reset()
    {
        _swipeDirection = [SwipeDirection.None, SwipeDirection.None];
        _leftSwipe = 0;
        _rightSwipe = 0;
        _topSwipe = 0;
        _bottomSwipe = 0;
        StateHasChanged();
    }
}

Prevent default browser behavior

Browser will not scroll when PreventDefault is set to true.

None - Swiped: px

Prevent Default

Sensitivity

<MudSwipeArea @ref="_swipeArea" OnSwipeEnd="HandleSwipeEnd" Style="width: 100%; height: 300px; background-color:var(--mud-palette-surface)" Sensitivity="_sensitivity" PreventDefault="@_preventDefault">
    <MudText Style="user-select: none;" 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 {
    private MudSwipeArea _swipeArea;
    private SwipeDirection _swipeDirection;
    private bool _preventDefault = true;
    private int _sensitivity = 100;
    private double? _swipeDelta;

    private void HandleSwipeEnd(SwipeEventArgs args)
    {
        _swipeDirection = args.SwipeDirection;
        _swipeDelta = args.SwipeDelta;
    }
}