Drawer
The Drawer
component is a panel that slides out from the edge of the screen. It can be useful to provide access to destinations in your app without leaving the current page.
Focus
The Drawer
component is a modal component. It traps focus within the Drawer
while it is open. When the drawer is closed, focus is returned to the element that had focus before the Drawer
was opened.
Props
Name | Type | Default | Description |
---|---|---|---|
modelValue | boolean | false | Whether the Drawer is opened or not. |
Slots
Name | Description |
---|---|
default | The content of the Drawer . |
Design Tokens
tokens.config.ts
import { defineTheme } from 'pinceau'
export default defineTheme({
elements: {
drawer: {
maxWidth: '{size.xs}',
}
}
})
ElementsDisclosureDisclosure is a component that can be used to hide or show content. The disclosure will be hidden by default, but the user can click on the disclosure title to show the content.ElementsModalA Modal is a component that appears on top of the main content of the page. It is used to display important information or to request user input, while blocking interaction with the rest of the page.