Sheet
Extends the Dialog component to display content that complements the main content of the screen.
About
Sheet is a specialized dialog that slides out from the edges of the screen. It is commonly used for mobile navigation menus, profile settings, or filters that shouldn't take up space on the main screen.
Installation
Run the following command to install the sheet component:
Usage
Default
A classic sheet that slides from the right.
Sides
Use the side property to specify which edge of the screen the sheet should appear from.
Size
Adjust the size of the sheet by adding CSS classes to the content.
Close Methods
Demonstrates different ways to close the sheet.
Themed Variants
Apply custom colors and borders to match semantic contexts.
Brain API
BrnSheet
| Selector | Inputs | ExportAs |
|---|---|---|
| [brnSheet], brn-sheet | side: 'top' | 'bottom' | 'left' | 'right' (default: 'top') | brnSheet |
BrnSheetTrigger
| Selector | Inputs |
|---|---|
| button[brnSheetTrigger] | side: 'top' | 'bottom' | 'left' | 'right' | undefined |
Helm API
HlmSheetContent
| Selector | Inputs |
|---|---|
| hlm-sheet-content | showCloseButton: boolean (default: true) |
Note: Helm API consists of various components (hlm-sheet-header, hlm-sheet-footer, hlmSheetTitle, etc.) that provide the Spartan UI design system styling.