MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Swipe area

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

See Swipe area API for parameter documentation.

Swipe directions

Swipe your finger in different directions 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

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 🗙