Drawer
Drawer is a container component displayed as an overlay.
Import #
import { DrawerModule } from 'primeng/drawer';Basic #
Drawer is used as a container and visibility is controlled with a binding to visible.
Position #
Drawer location is configured with the position property that can take left, right, top and bottom as a value.
Size #
Drawer dimension can be defined with style or class properties, this responsive example utilizes Tailwind.
Full Screen #
Drawer can cover the whole page when fullScreen property is enabled.
Template #
Drawer is customizable by header, content, footer templates.
Headless #
Headless mode allows you to customize the entire user interface instead of the default elements.
Accessibility #
Screen Reader
Drawer component uses complementary role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like aria-labelledby can be added. In addition aria-modal is added since focus is kept within the drawer when opened.
It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary.
Trigger element also requires aria-expanded and aria-controls to be handled explicitly.
<p-button
icon="pi pi-arrow-right"
(click)="visible = true"
aria-controls="{{visible ? 'drawer' : null}}"
aria-expanded="{{visible ? true : false}}"
></p-button>
<p-drawer
[(visible)]="visible"
id="drawer"
(onHide)="visible = false"
role="region"
>
content
</p-drawer>Overlay Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the next the focusable element within the drawer. |
| shift + tab | Moves focus to the previous the focusable element within the drawer. |
| escape | Closes the dialog if closeOnEscape is true. |
Close Button Keyboard Support
| Key | Function |
|---|---|
| enter | Closes the drawer. |
| space | Closes the drawer. |
