Swipe area

Note: these examples only works on devices where touch events are supported.

See Swipe area API for parameter documentation.

Swipe directions

Swipe your finger in different direction to see how the component works.

None

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudSwipeArea OnSwipe="@((d) => _swipeDirection = d)" Style="width: 100%; height: 300px">
    <MudText Typo="@Typo.body1">@_swipeDirection</MudText>
</MudSwipeArea>
@code{ SwipeDirection _swipeDirection; }

Usage: open and close drawer

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudSwipeArea OnSwipe="@OnSwipe" 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.Filled.Dashboard" IconColor="Color.Inherit">Store</MudNavLink>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Filled.Dashboard" IconColor="Color.Inherit">Library</MudNavLink>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Filled.Dashboard" IconColor="Color.Inherit">Community</MudNavLink>
            </MudNavMenu>
        </MudDrawer>
    </MudPaper>
</MudSwipeArea>
@code{
    bool _drawerOpen;

    public void OnSwipe(SwipeDirection direction)
    {
        if (direction == SwipeDirection.LeftToRight && !_drawerOpen)
        {
            _drawerOpen = true;
            StateHasChanged();
        }
        else if (direction == SwipeDirection.RightToLeft && _drawerOpen)
        {
            _drawerOpen = false;
            StateHasChanged();
        }
    }
}

Usage: navigate a date picker

March 2021

SunMonTueWedThuFriSat
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@using System.Globalization

<MudSwipeArea OnSwipe="@OnSwipe">
    <MudDatePicker PickerVariant="PickerVariant.Static" Date="@(DateTime.Today.AddDays(1))" @bind-PickerMonth="@_pickerMonth" />
</MudSwipeArea>
@code{ 
    DateTime? _pickerMonth = DateTime.Now.StartOfMonth(CultureInfo.CurrentCulture);

    public void OnSwipe(SwipeDirection direction)
    {
        if (direction == SwipeDirection.LeftToRight)
        {
            _pickerMonth = _pickerMonth.Value.AddMonths(-1);
            StateHasChanged();
        }
        else if (direction == SwipeDirection.RightToLeft)
        {
            _pickerMonth = _pickerMonth.Value.AddMonths(1);
            StateHasChanged();
        }
    }
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙