Sheet
A panel that slides in from the edge of the screen, typically used for navigation or forms.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Sheet />
position: fixed
popovers (Select, DatePicker, Combobox) inside Sheets. 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="SheetAnimation.Fade"
or Animation="SheetAnimation.None".
flex-1 overflow-y-auto
— or use OverlayForm,
which bakes that scroll region in for you.
When to Use
- Display side panels for editing profiles, settings, or detail views
- Build slide-out navigation menus for mobile or compact layouts
- Show supplementary forms or configuration options without leaving the current page
- Present multi-step content in a panel that slides in from any edge
- Create responsive overlays that adapt between Sheet (desktop) and Drawer (mobile)
Pick a value to see it applied live.
SwipeToClose="true" on SheetContent to let users dismiss the sheet with a touch swipe. The swipe direction matches the Side parameter — swipe-down on a Bottom sheet, swipe-right on a Right sheet, etc. Default false because Sheets often contain scrollable content; only enable it when the sheet's content fits without scrolling.
Open any side and try the swipe gesture (works on touch devices and mouse-drag).
Intercepting close
OnBeforeClose lets you guard
any close attempt — Escape, backdrop click, or the close button. The handler receives a
DismissEventArgs with a
Reason string
("escape",
"outside",
"close",
"action", or
"cancel"). Set
e.Cancel = true to keep
the sheet open.
Nested stacking. A Sheet opened on top of a Dialog (or another Sheet / Drawer / AlertDialog) now stacks correctly — each overlay picks the next z-index slot, and Escape only closes the top-most one. No configuration required.
Keyboard Interactions
| Key | Action |
|---|---|
| Escape | Close the sheet (unless PreventClose is enabled) |
| Tab | Cycle focus through interactive elements within the sheet (focus trap) |
| Shift + Tab | Move focus to the previous interactive element within the sheet |
API Reference
Sheet
SheetContent
Side accepts Top, Right, Bottom, Left. Size accepts Sm, Default, Lg, Xl, Full — Full on Top/Bottom takes the entire viewport, the mobile-fullscreen bottom-sheet pattern.
SheetTrigger
Mirrors the Dialog API — opens the sheet on click.
SheetClose
Mirrors the Dialog API — closes the sheet on click.
SheetHeader / SheetFooter
Flex containers for the panel's header and footer regions.
SheetTitle / SheetDescription
Style the title and description text and wire them to the panel's accessible name/description.