MRoessler.BlazorBottomSheet
0.0.8
dotnet add package MRoessler.BlazorBottomSheet --version 0.0.8
NuGet\Install-Package MRoessler.BlazorBottomSheet -Version 0.0.8
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="MRoessler.BlazorBottomSheet" Version="0.0.8" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="MRoessler.BlazorBottomSheet" Version="0.0.8" />
<PackageReference Include="MRoessler.BlazorBottomSheet" />
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add MRoessler.BlazorBottomSheet --version 0.0.8
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: MRoessler.BlazorBottomSheet, 0.0.8"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package MRoessler.BlazorBottomSheet@0.0.8
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=MRoessler.BlazorBottomSheet&version=0.0.8
#tool nuget:?package=MRoessler.BlazorBottomSheet&version=0.0.8
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
MRoessler.BlazorBottomSheet
✨ .NET Blazor BottomSheet for mobile apps ✨
| Light Theme | Dark Theme |
|---|---|
 |
 |
Features
- Dragging is recognized on the complete sheet (not just the drag handle)
- Dynamically toggles between scrolling and dragging when touching scrollable areas
- Optimized for touch input (mouse works too but not as smooth)
- Supports Server and WebAssembly render modes
- Customizable via CSS/JS
- No dependencies beside
Microsoft.AspNetCore.Components.Web
Sample App
🚀 Start the sample app in your browser 🚀
💡 For the best experience enable device and touch simulation in your browser's debug tools - Firefox example:
Source Code
- Sample.WebApp
- Sample.Wasm
- Sample.RazorComponents
- contains components used by both apps
Getting Started
Install nuget package
Register BottomSheet services in
Program.cs
using MRoessler.BlazorBottomSheet;
...
builder.Services.AddBottomSheet();
- Add
BottomSheetOutlettoMainLayout.razor(your BottomSheets will be rendered at this location)
@inherits LayoutComponentBase
...
<BottomSheetOutlet />
- Add to your
app.cssto block the browser's default scrolling behavior
html, body {
overscroll-behavior-y: none; /* block pull to refresh (all browsers) */
overflow-y: hidden; /* block scrolling (Chrome Android) */
}
- Add BottomSheet to your Razor Component
<BottomSheet>
<div>
<span>Your content that must be visible in minimized state</span>
<MinimizedExpansionMarker />
<span>Your content that must be visible in normal state</span>
<NormalExpansionMarker />
</div>
</BottomSheet>
API documentation
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net10.0 is compatible. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
-
net10.0
- Microsoft.AspNetCore.Components.Web (>= 10.0.10)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.