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".
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
| Property | Type | Default | Description |
|---|---|---|---|
| Open | bool | false | Controls whether the sheet is open. Use with @bind-Open for two-way binding. |
| OpenChanged | EventCallback<bool> | — | Callback invoked when the open state changes. |
| IsOpen | bool | > Open | Obsolete alias for Open; will be removed in a future release. |
| IsOpenChanged | EventCallback<bool> | > OpenChanged | Obsolete alias for OpenChanged; will be removed in a future release. |
SheetContent
| Property | Type | Default | Description |
|---|---|---|---|
| Side | SheetSide | Right | Which edge the sheet slides in from. Values: Top, Right, Bottom, Left. |
| Size | SheetSize | Default | Sheet dimension. On Left/Right this controls width; on Top/Bottom it controls height (2.1.1). Values: Sm, Default, Lg, Xl, Full — where Full on Top/Bottom takes the entire viewport, the mobile-fullscreen bottom-sheet pattern. |
| PreventClose | bool | false | Prevents closing via backdrop click or Escape key. |
| SwipeToClose | bool | false | Enables touch swipe-to-dismiss in the direction matching Side (Top→up, Right→right, Bottom→down, Left→left). Default false because Sheets often contain scrollable content — enable only when content fits without scrolling. Added in rc.49. |
SheetTrigger / SheetClose / SheetHeader / SheetFooter / SheetTitle / SheetDescription
| Property | Type | Default | Description |
|---|---|---|---|
| These layout sub-components mirror the Dialog API: SheetTrigger opens, SheetClose closes, SheetHeader/Footer are flex containers, SheetTitle/Description style the text. | |||