Swipe directions
Swipe your finger in different directions to see how the component works.
None
<MudSwipeArea OnSwipe="@((d) => _swipeDirection = d)" Style="width: 100%; height: 300px"> <MudText Typo="@Typo.body1">@_swipeDirection</MudText> </MudSwipeArea>
@code{ SwipeDirection _swipeDirection; }
Prevent default browser behavior
Browser will not scroll when PreventDefault is set to true.
None - Swiped: px
<MudSwipeArea @ref="_swipeArea" OnSwipe="@((d) => _swipeDirection = d)" Style="width: 100%; height: 300px" Sensitivity="_sensitivity" PreventDefault="@_preventDefault"> <MudText Typo="@Typo.body1">@($"{_swipeDirection} - Swiped: {_swipeArea.GetSwipeDelta()}px")</MudText> </MudSwipeArea> <MudSwitch @bind-Checked="@_preventDefault" Color="Color.Primary">Prevent Default</MudSwitch> <MudNumericField @bind-Value="_sensitivity" Label="Sensitivity" Min="0" />
@code { MudSwipeArea _swipeArea; SwipeDirection _swipeDirection; bool _preventDefault = true; int _sensitivity = 100; }
Drawer Example
<MudSwipeArea 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.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{ bool _drawerOpen; public void OnSwipe(SwipeDirection direction) { if (direction == SwipeDirection.LeftToRight && !_drawerOpen) { _drawerOpen = true; StateHasChanged(); } else if (direction == SwipeDirection.RightToLeft && _drawerOpen) { _drawerOpen = false; StateHasChanged(); } } }
DatePicker Example
SunMonTueWedThuFriSat
@using System.Globalization <MudSwipeArea 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(); } } }