SheetShell
Edge-sliding panel; wraps the Sheet primitive. Side uses the shared Position enum.
Interactive-mode
Examples
From the right
Filters
Sheet body content.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| SheetShell | Edge-sliding panel wrapper around the Sheet primitive. Translates the shared Position enum to the primitive's SheetSide via the internal PositionClasses.ToSheetSide helper. The Body slot is wrapped in a flex-1 min-h-0 overflow-y-auto px-4 div so consumer content aligns horizontally with the SheetHeader/SheetFooter padding (p-4) and long content scrolls within the panel rather than pushing the footer offscreen. |
SheetShell
Edge-sliding panel wrapper around the Sheet primitive. Translates the shared Position enum to the primitive's SheetSide via the internal PositionClasses.ToSheetSide helper. The Body slot is wrapped in a flex-1 min-h-0 overflow-y-auto px-4 div so consumer content aligns horizontally with the SheetHeader/SheetFooter padding (p-4) and long content scrolls within the panel rather than pushing the footer offscreen.
| Property | Type | Required | Description |
|---|---|---|---|
| Header | RenderFragment? | Top of the sheet. Renders inside <SheetHeader> (which has p-4). Strict-shape slot. | |
| Body | RenderFragment? | Main scrollable content. Wrapped in a padded flex-filling div (flex-1 min-h-0 overflow-y-auto px-4) so content aligns with the header/footer padding. | |
| Actions | RenderFragment? | Bottom action row. Renders inside <SheetFooter> (p-4 justify-end). Typically two Buttons. Strict-shape slot. | |
| Side | Position | Edge the sheet slides in from. Default: Position.Right. Other values: Top, Bottom, Left. Translated internally to the primitive's SheetSide enum. Shared Position enum. | |
| Open | bool | Open state. Two-way bindable via OpenChanged. | |
| OpenChanged | EventCallback<bool> | Fires when the sheet requests to close. Pair with Open for two-way binding. |