Drawer
A panel that slides up from the bottom of the screen on mobile devices.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Drawer />
position: fixed
popovers (Select, DatePicker, Combobox) inside Drawers. Fixed in rc.21
— the slide keyframes now end at transform: none
instead of identity-translate. If you still need predictability for older
rc consumers, set Animation="DrawerAnimation.Fade"
or Animation="DrawerAnimation.None".
When to Use
- Present mobile-first overlays that slide up from the bottom of the screen
- Build bottom sheets for action selection, filters, or confirmations
- Show supplementary content without navigating away from the current page
- Provide a gesture-friendly overlay that supports swipe-to-dismiss
- Display quick-action menus on touch devices
Bottom drawer with snap points at 40% / 75% / 100%. On a touch device (or DevTools device emulation), drag the handle to move between snaps; a quick flick down dismisses. On desktop it opens at the active snap so you can still see the resting position. Active snap: 75% (index 1).
Pick a value to see it applied live.
Intercepting close
OnBeforeClose fires for
every close path including swipe-down on touch devices. The handler receives a
DismissEventArgs with a
Reason string —
"escape",
"outside",
"swipe",
"close",
"action", or
"cancel". Set
e.Cancel = true to keep
the drawer open.
Nested stacking. Drawers stack automatically on top of Dialogs, Sheets, AlertDialogs, or other Drawers — z-index is allocated per overlay, and Escape closes only the top-most one. No API change.
Keyboard Interactions
| Key | Action |
|---|---|
| Escape | Close the drawer (unless PreventClose is enabled) |
| Tab | Cycle focus through focusable elements within the drawer |
| Shift + Tab | Move focus to the previous focusable element within the drawer |
On touch devices, swiping down on the drawer handle also dismisses it.
API Reference
Drawer
| Property | Type | Default | Description |
|---|---|---|---|
| Open | bool | false | Controls whether the drawer is open. Use with @bind-Open for two-way binding. |
| OpenChanged | EventCallback<bool> | — | Callback invoked when the open state changes. |
| IsOpen | bool | false | Deprecated alias for Open. Prefer Open in new code. |
| IsOpenChanged | EventCallback<bool> | — | Deprecated alias for OpenChanged. Prefer OpenChanged in new code. |
DrawerContent
| Property | Type | Default | Description |
|---|---|---|---|
| PreventClose | bool | false | Prevents closing via swipe or backdrop click. |
| The panel that slides up from the bottom of the screen. Includes focus trap, scroll lock, and swipe-to-dismiss gesture. Sub-components DrawerTrigger, DrawerClose, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription mirror the Dialog/Sheet API. | |||
| Side | Lumeo.Side | Bottom | Side the drawer slides in from. Values: Top, Right, Bottom, Left. |
| SnapPoints | IReadOnlyList<double>? | null | vaul-style resting heights as ascending fractions (0<f≤1), e.g. [0.4, 0.75, 1]. Top/Bottom only; the panel rests at one, drags between them, and dismisses below the lowest. |
| ActiveSnapPoint | int | -1 | Index into SnapPoints of the current snap (two-way via @bind-ActiveSnapPoint). -1 opens at the most-open (last) snap. |
| ActiveSnapPointChanged | EventCallback<int> | — | Fires when the drawer settles on a new snap (drag/flick). |