Drawer

Drawers are flexible containers anchored to the top, right, bottom, or left of the screen. They are used primarily in Chi for displaying menus on small devices.

Examples

Web Component

Chi Vue

Props

Property	Description	Type	Default
`active`	To open or close the drawer	`boolean`	undefined
`backdrop`	To add a backdrop behind the drawer, which covers the viewport	`string`	undefined
`noHeader`	To remove the space for the header	`boolean`	undefined
`nonClosable`	To render Drawer without a close button	`boolean`	`false`
`portal`	To define portal style of the Drawer header	`boolean`	`false`
`position`	To set position of the drawer { top, right, bottom or left }	`string`	undefined
`title`	To define drawer title. Not compatible with noHeader	`string`	undefined

Events

Event	Description	Type
`chiDrawerHidden`	Drawer has been hidden to the user. The animation has completed.	`CustomEvent<string>`
`chiDrawerHide`	Drawer hide method has executed, but the closing animation has not started yet	`CustomEvent<string>`
`chiDrawerShow`	Drawer show method has executed, but the showing animation has not started yet	`CustomEvent<string>`
`chiDrawerShown`	Drawer has been shown to the user and is fully visible. The animation has completed.	`CustomEvent<string>`
`chiDrawerClickOutside`	Mutating a prop locally is an anti-pattern in Vue, so the user can use this event to decide whether or not the drawer needs to be hidden.	`CustomEvent<string>`

Methods

Method	Description	Returns	Parameters
`hide() => Promise<void>`	Hides the drawer	Type: Promise<void>	-
`show() => Promise<void>`	Shows the drawer.	Type: Promise<void>	-
`toggle() => Promise<void>`	Toggles active state (show/hide)	Type: Promise<void>	-

JavaScript

This component accepts options to configure its behavior.

Option	Default	Description
`animated`	`true`	Enables animation on drawer display and hide, and fade effect in the backdrop.
`target`	`null`	Lets the developer refer the target programmatically instead of by data-target attribute. It accepts Element object and xpath selector string.
`preventAutoHide`	`false`	Set `preventAutoHide` to `true` to prevent hidding the drawer when clicking outside the drawer.

Methods

Method	Description	Returns
`hide() => void`	Hides the drawer	Type: void
`show() => void`	Shows the drawer	Type: void
`toggle() => void`	Toggles active state (show/hide)	Type: void

Events

Event	Description
`chiDrawerShow`	Drawer show has been triggered, but the showing animation has not started yet.
`chiDrawerHide`	Drawer hide has been triggered, but the closing animation has not started yet.
`chiDrawerShown`	Drawer has been shown to the user and is fully visible. The animation has completed.
`chiDrawerHidden`	Drawer has been hidden to the user. The animation has completed.

Preventing memory leaks

Drawer components have a dispose function to free all resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.

It is safe to call the drawer method more than once, as it will return any previously created drawer component associated with the trigger.

Accessibility

Accessibility guidelines coming soon