EnShelf
Preview
Props
| Name | Description | Default | Control |
|---|---|---|---|
| qaId | Id that can be set for automation selectors. string | "" | |
| size | The width of the shelf. string | "md" | |
| title | Sets the title in the shelf header. string | "" | |
| showHeader | Renders the shelf header and header slot. boolean | true | |
| showSuccessBtn | Shows the default success button inside the actions bar. boolean | true | |
| canClose | Allows the shelf to be closed using the close buttons. boolean | true | |
| closeOnClickOutside | Prevents shelf from closing when clicking outside of the shelf. boolean | true | |
| btnSuccessText | Sets text for the default success button in the actions bar. string | "Save" | |
| btnCancelText | Sets text for the default cancel button in the actions bar. string | "Cancel" | |
| trapFocus | Locks Tab navigation inside the shelf while it is open. Tab order is header → top → body → actions, then wraps. Disable for modeless shelves where the user needs to keep tabbing through the page behind. boolean | true | |
| side | The side of the screen the shelf is anchored to. string | "right" | |
| showActions | Renders the sticky actions bar. Set to false for read-only / non-actionable shelves. boolean | true | |
| showShelf | Displays the shelf. Should be controlled outside of the shelf component. boolean | false | |
| showBackdrop | Renders the dimmed backdrop behind the shelf. When false, the page behind the shelf stays clickable/scrollable so the user can update content in the main view without closing the shelf. boolean | true | |
| shelfContentElement | Changes the container element of the shelf content. string | "div" |
Slots
header
Replaces the `shelf-title` div.
title
Sets the content inside the `shelf-title` div.
content
Replaces the entire scrollable region (top + actions + body).
top
Content that sits above the sticky actions and scrolls away with the body.
body
Sets the content inside the `shelf-body` div.
actions
Sticky toolbar that pins just below the header. Place buttons here.
Events
close
Fires when the shelf closes. Should be used to set the `showShelf` prop back to false if used.
open
Fires when the shelf opens.
save
Triggered by the default success button in the actions bar. Emits the closeShelf method as an arg so consumers can close after async work.
Payload
| Name | Type | Description |
|---|---|---|
closeShelf | function | function that will close the shelf if called. |
Methods
No methods defined.