Drawer

Flexible side panels for mobile menus, details views, and navigation.

Positioning
Customization
PrismDrawerComponent APINameTypeDefaultDescription
visiblemodel<boolean>falseVisibility of the drawer (two-way binding)
position'left' | 'right' | 'top' | 'bottom''right'Direction from which the drawer slides in
title / headerstring | TemplateRef<any>''Content for the header title area
footerstring | TemplateRef<any> | nullnullContent for the footer area
widthstring'300px'Width for left/right drawers
heightstring'300px'Height for top/bottom drawers
closeOnEscapebooleantrueWhether hitting ESC key closes the drawer
maskClosablebooleantrueWhether clicking the mask closes the drawer
showClosebooleantrueWhether to show the close button in the header
PrismDrawerService APINameTypeDefaultDescription
open<T, D, R>(component, config)PrismDrawerRef<R>-Opens a drawer with a dynamic component
config.dataDundefinedData to inject into the component
config.title / config.headerstring | TemplateRef<any>''Header content
config.width / config.heightstring'300px'Dimensions based on position
config.positionDrawerPosition'right'Placement direction
PrismDrawerRef & TokensPrismDrawerRefNameTypeDefaultDescription
close(result?: R)void-Closes the drawer and emits the result
afterClosed$Observable<R | undefined>-Observable that emits when the drawer is closed
export class MyDrawerContent {
  ref = inject(PrismDrawerRef);

  close() {
    this.ref.close({ saved: true });
  }
}
DRAWER_DATANameTypeDefaultDescription
DRAWER_DATAInjectionToken<unknown>-Token to access data passed via config.data
export class MyDrawerContent {
  data = inject(DRAWER_DATA) as MyDataType;
}

Name	Type	Default	Description
`visible`	`model<boolean>`	`false`	Visibility of the drawer (two-way binding)
`position`	`'left' \| 'right' \| 'top' \| 'bottom'`	`'right'`	Direction from which the drawer slides in
`title / header`	`string \| TemplateRef<any>`	`''`	Content for the header title area
`footer`	`string \| TemplateRef<any> \| null`	`null`	Content for the footer area
`width`	`string`	`'300px'`	Width for left/right drawers
`height`	`string`	`'300px'`	Height for top/bottom drawers
`closeOnEscape`	`boolean`	`true`	Whether hitting ESC key closes the drawer
`maskClosable`	`boolean`	`true`	Whether clicking the mask closes the drawer
`showClose`	`boolean`	`true`	Whether to show the close button in the header

Name	Type	Default	Description
`open<T, D, R>(component, config)`	`PrismDrawerRef<R>`	`-`	Opens a drawer with a dynamic component
`config.data`	`D`	`undefined`	Data to inject into the component
`config.title / config.header`	`string \| TemplateRef<any>`	`''`	Header content
`config.width / config.height`	`string`	`'300px'`	Dimensions based on position
`config.position`	`DrawerPosition`	`'right'`	Placement direction

Name	Type	Default	Description
`close(result?: R)`	`void`	`-`	Closes the drawer and emits the result
`afterClosed$`	`Observable<R \| undefined>`	`-`	Observable that emits when the drawer is closed