BlazorBottomSheets 0.1.0

BlazorBottomSheets

An iOS / Google Maps-style bottom sheet component for Blazor. Touch-friendly drag gestures, snap points, velocity-based flicks, backdrop, and CSS-variable theming — with no JavaScript setup required.

Works in Blazor WebAssembly, Blazor Server, and Blazor Web App interactive render modes (.NET 10).

Features

• 📌 Snap points — e.g. [0.25, 0.5, 0.9] of the viewport height, with drag + flick between them
• 📐 Auto-height mode — no snap points: the sheet sizes to its content, drag down to dismiss
• 🖱️ Pointer + touch — one gesture engine for mouse and touch, with velocity projection and rubber-band overshoot
• 🧭 Smart scroll interplay — content scrolls natively; the sheet only drags when content is scrolled to the top (pull down) or when expanding to a higher snap (pull up)
• 🎭 Backdrop with fade, close on backdrop click and/or Escape
• ♿ role="dialog", aria-modal, focus moved into the sheet on open and restored on close, prefers-reduced-motion support
• 🔒 Body scroll-lock with scrollbar-width compensation while open
• 🎨 Themeable via --bbs-* CSS custom properties

Installation

dotnet add package BlazorBottomSheets

Make sure your app links the scoped-CSS bundle (all Blazor templates do this by default):

<link rel="stylesheet" href="YourAppAssemblyName.styles.css" />

That's it — the component loads its JavaScript module on demand; there is nothing else to register.

Usage

@using BlazorBottomSheets

<button @onclick="() => _open = true">Show sheet</button>

<BottomSheet @bind-IsOpen="_open">
    <p>Hello from the bottom sheet!</p>
</BottomSheet>

@code {
    private bool _open;
}

Snap points, header and footer

<BottomSheet @bind-IsOpen="_open"
             SnapPoints="new double[] { 0.25, 0.5, 0.9 }"
             DefaultSnapPoint="0.5"
             OnSnapPointChanged="s => Console.WriteLine($"Snapped to {s}")"
             OnClosed="r => Console.WriteLine($"Closed: {r}")">
    <HeaderContent>Nearby places</HeaderContent>
    <ChildContent>
        <ul>@* long scrollable list *@</ul>
    </ChildContent>
    <FooterContent>
        <button @onclick="() => _open = false">Done</button>
    </FooterContent>
</BottomSheet>

Programmatic control

<BottomSheet @ref="_sheet" @bind-IsOpen="_open" SnapPoints="new double[] { 0.3, 0.9 }">
    ...
</BottomSheet>

@code {
    private BottomSheet? _sheet;
    private Task Expand() => _sheet!.SnapToAsync(0.9);
}

Parameters

Events: OnOpened (after the open animation), OnClosed(BottomSheetDismissReason) (after the close animation; reason is Programmatic, Drag, Backdrop, or Escape), OnSnapPointChanged(double).

Members: CurrentSnapPoint (the snap point the sheet rests at, or null), SnapToAsync(double).

Theming

Override any of these CSS custom properties globally (e.g. on :root):

Dark theme example:

:root[data-theme="dark"] {
    --bbs-background: #1e1e20;
    --bbs-color: #f0f0f0;
    --bbs-handle-color: rgba(255, 255, 255, 0.25);
    --bbs-backdrop-color: rgba(0, 0, 0, 0.6);
}

License

MIT