MudBlazor - Blazor Component Library

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 Style="user-select: none;" Typo="@Typo.body1">@_swipeDirection</MudText>
</MudSwipeArea>

@code {
    private SwipeDirection _swipeDirection;
}

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" 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

<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;

    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

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 Area

API

Swipe directions

Prevent default browser behavior

Drawer Example

DatePicker Example