@synerise/ds-drawer NPM | npm.io

0.6.17 • Published 5 days ago

Install

Weekly downloads

305

License

ISC

Repository

Last release

5 days ago

id: drawer

title: Drawer

Drawer UI Component

Installation

npm i @synerise/ds-drawer
or
yarn add @synerise/ds-drawer

Usage

import Drawer from '@synerise/ds-drawer'

<Drawer
  visible={true}
  width={400}
  onClose={() => {}}
>
    <Drawer.DrawerHeader>
        <span>Header</span>
    </Drawer.DrawerHeader>
    <Drawer.DrawerBody>
        <Drawer.DrawerContent>
            <p>Content</p>
        </Drawer.DrawerContent>
    </Drawer.DrawerBody>
</Drawer>

Demo

API

Property	Description	Type	Default
destroyOnClose	Whether to unmount child components on closing drawer or not.	boolean	`false`
getContainer	Return the mounted node for Drawer.	() => HTMLElement	Selectors
mask	Whether to show mask or not.	boolean	`true`
maskClosable	Clicking on the mask (area outside the Drawer) to close the Drawer or not.	boolean	`true`
maskStyle	Style for Drawer's mask element.	object	{}
style	Style of wrapper element which contains mask compare to drawerStyle	object	{}
drawerStyle	Style of the popup layer element	object	{}
visible	Whether the Drawer dialog is visible or not.	boolean	`false`
width	Width of the Drawer dialog.	string / number	256
height	placement is top or bottom, height of the Drawer dialog.	string / number	256
className	The class name of the container of the Drawer dialog.	string	-
zIndex	The z-index of the Drawer.	number	1000
placement	The placement of the Drawer.	`top` / `left` / `right` / `bottom` / `right`
onClose	Specify a callback that will be called when a user clicks mask, close button or Cancel button.	(e:Event) => void	-
afterVisibleChange	Callback after the animation ends when switching drawers.	(visible: boolean) => void	-
keyboard	Whether support press esc to close	boolean	`true`

@infinitebrahmanuniverse/nolb-_syn @everything-registry/sub-chunk-889 @synerise/ds-item-filter @synerise/ds-column-manager @synerise/ds-sidebar-object @zalastax/nolb-_syn

5 days ago

11 days ago

13 days ago

1 month ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

4 months ago

5 months ago

5 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

9 months ago

10 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago