Swipe Area

Detects and responds to swipe gestures for navigation or actions.

API
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

<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;
    }
}
Drawer Example

Swipe LeftToRight/RightToLeft to open and close the drawer.

<MudSwipeArea OnSwipeEnd="@OnSwipeEnd" Style="width: 100%;">
    <MudPaper Height="200px" Style="overflow:hidden; position:relative;">
        <MudDrawer @bind-Open="@_drawerOpen" Fixed="false" Elevation="1" Variant="@DrawerVariant.Persistent" Color="Color.Primary">
            <MudDrawerHeader>
                <MudText Typo="Typo.h6">My App</MudText>
            </MudDrawerHeader>
            <MudNavMenu>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Dashboard" IconColor="Color.Inherit">Store</MudNavLink>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Dashboard" IconColor="Color.Inherit">Library</MudNavLink>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Dashboard" IconColor="Color.Inherit">Community</MudNavLink>
            </MudNavMenu>
        </MudDrawer>
    </MudPaper>
</MudSwipeArea>

@code {
    private bool _drawerOpen = true;

    public void OnSwipeEnd(SwipeEventArgs e)
    {
        if (e.SwipeDirection == SwipeDirection.LeftToRight && !_drawerOpen)
        {
            _drawerOpen = true;
            StateHasChanged();
        }
        else if (e.SwipeDirection == SwipeDirection.RightToLeft && _drawerOpen)
        {
            _drawerOpen = false;
            StateHasChanged();
        }
    }
}
DatePicker Example

Swipe LeftToRight/RightToLeft to change months.

SunMonTueWedThuFriSat
@using System.Globalization

<MudSwipeArea OnSwipeEnd="@OnSwipeEnd">
    <div style="user-select: none;">
        <MudDatePicker PickerVariant="PickerVariant.Static" Date="@(DateTime.Today.AddDays(1))" @bind-PickerMonth="@_pickerMonth"/>
    </div>
</MudSwipeArea>

@code {
    private DateTime? _pickerMonth = DateTime.Now.StartOfMonth(CultureInfo.CurrentCulture);

    public void OnSwipeEnd(SwipeEventArgs e)
    {
        if (e.SwipeDirection == SwipeDirection.LeftToRight)
        {
            _pickerMonth = _pickerMonth?.AddMonths(-1);
            StateHasChanged();
        }
        else if (e.SwipeDirection == SwipeDirection.RightToLeft)
        {
            _pickerMonth = _pickerMonth?.AddMonths(1);
            StateHasChanged();
        }
    }
}
Swipe Box's Drag Example

Try to drag this Swipe Box!

<div style="height: 400px; width: 300px; position: relative; background-color: var(--mud-palette-background)">
    <div style="height: 56px; width: 56px; border-radius: 50%; cursor: grab; z-index: 9999; position: absolute; left: @(_leftPadding)px; top: @(_topPadding)px;">
        <MudSwipeArea Class="mud-height-full mud-width-full mud-theme-primary d-flex align-center justify-center rounded-circle" OnSwipeMove="HandleSwipeMove">
            @if (_showIcon)
            {
                <MudIcon Style="width: 80%; height: 80%;" Icon="@Icons.Custom.Brands.MudBlazor" />
            }
        </MudSwipeArea>
    </div>
</div>

@code {
    private double _leftPadding;
    private double _topPadding;
    private bool _showIcon = false;

    private void HandleSwipeMove(MultiDimensionSwipeEventArgs e)
    {
        _leftPadding -= e.SwipeDeltas[0] ?? 0;
        _topPadding -= e.SwipeDeltas[1] ?? 0;

        if (_leftPadding < 0 || _topPadding < 0 || _leftPadding > 244 || _topPadding > 344)
        {
            _showIcon = true;
        }
        else
        {
            _showIcon = false;
        }
    }
}
An unhandled error has occurred. Reload 🗙