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}',
    }
  }
})

Edit this page on GitHub

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.