1.0.4 • Published 2 months ago

@synerise/ds-drawer v1.0.4

Weekly downloads
305
License
ISC
Repository
github
Last release
2 months 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

PropertyDescriptionTypeDefault
destroyOnCloseWhether to unmount child components on closing drawer or not.booleanfalse
getContainerReturn the mounted node for Drawer.() => HTMLElementSelectors
maskWhether to show mask or not.booleantrue
maskClosableClicking on the mask (area outside the Drawer) to close the Drawer or not.booleantrue
maskStyleStyle for Drawer's mask element.object{}
styleStyle of wrapper element which contains mask compare to drawerStyleobject{}
drawerStyleStyle of the popup layer elementobject{}
visibleWhether the Drawer dialog is visible or not.booleanfalse
widthWidth of the Drawer dialog.string / number256
heightplacement is top or bottom, height of the Drawer dialog.string / number256
classNameThe class name of the container of the Drawer dialog.string-
zIndexThe z-index of the Drawer.number1000
placementThe placement of the Drawer.top / left / right / bottom / right
onCloseSpecify a callback that will be called when a user clicks mask, close button or Cancel button.(e:Event) => void-
afterVisibleChangeCallback after the animation ends when switching drawers.(visible: boolean) => void-
keyboardWhether support press esc to closebooleantrue
1.0.2

3 months ago

1.0.1

5 months ago

1.0.0

5 months ago

1.0.4

2 months ago

1.0.3

2 months ago

0.7.3

5 months ago

0.7.2

5 months ago

0.7.1

6 months ago

0.7.0

6 months ago

0.6.31

8 months ago

0.6.30

9 months ago

0.6.29

9 months ago

0.6.28

9 months ago

0.6.27

9 months ago

0.6.25

10 months ago

0.6.26

10 months ago

0.6.21

11 months ago

0.6.20

11 months ago

0.6.23

11 months ago

0.6.22

11 months ago

0.6.24

11 months ago

0.6.18

1 year ago

0.6.19

1 year ago

0.6.17

1 year ago

0.6.16

1 year ago

0.6.15

1 year ago

0.6.14

1 year ago

0.6.13

1 year ago

0.6.12

1 year ago

0.6.11

1 year ago

0.6.10

1 year ago

0.6.9

1 year ago

0.6.8

1 year ago

0.6.7

2 years ago

0.6.6

2 years ago

0.6.5

2 years ago

0.5.43

2 years ago

0.5.44

2 years ago

0.5.41

2 years ago

0.5.42

2 years ago

0.5.40

2 years ago

0.5.38

2 years ago

0.5.39

2 years ago

0.5.37

2 years ago

0.6.3

2 years ago

0.6.2

2 years ago

0.6.4

2 years ago

0.6.1

2 years ago

0.6.0

2 years ago

0.5.36

2 years ago

0.5.32

2 years ago

0.5.33

2 years ago

0.5.30

2 years ago

0.5.31

2 years ago

0.5.34

2 years ago

0.5.35

2 years ago

0.5.29

2 years ago

0.5.28

2 years ago

0.5.27

2 years ago

0.5.25

3 years ago

0.5.26

3 years ago

0.5.21

3 years ago

0.5.22

3 years ago

0.5.20

3 years ago

0.5.23

3 years ago

0.5.24

3 years ago

0.5.11

3 years ago

0.5.18

3 years ago

0.5.19

3 years ago

0.5.17

3 years ago

0.5.14

3 years ago

0.5.12

3 years ago

0.5.13

3 years ago

0.5.10

3 years ago

0.5.9

3 years ago

0.5.8

3 years ago

0.5.7

3 years ago

0.5.6

3 years ago

0.4.77

4 years ago

0.5.4

4 years ago

0.5.3

4 years ago

0.5.5

4 years ago

0.5.0

4 years ago

0.5.2

4 years ago

0.5.1

4 years ago

0.4.76

4 years ago

0.4.75

4 years ago

0.4.73

4 years ago

0.4.74

4 years ago

0.4.72

4 years ago

0.4.71

4 years ago

0.4.70

4 years ago

0.4.69

4 years ago

0.4.68

4 years ago

0.4.67

4 years ago

0.4.64

4 years ago

0.4.62

4 years ago

0.4.60

4 years ago

0.4.61

4 years ago

0.4.59

4 years ago

0.4.58

4 years ago

0.4.57

4 years ago

0.4.56

4 years ago

0.4.54

4 years ago

0.4.55

4 years ago

0.4.53

4 years ago

0.4.52

4 years ago

0.4.51

4 years ago

0.4.50

4 years ago

0.4.49

4 years ago

0.4.48

4 years ago

0.4.47

4 years ago

0.4.46

5 years ago

0.4.45

5 years ago

0.4.44

5 years ago

0.4.43

5 years ago

0.4.42

5 years ago

0.4.41

5 years ago

0.4.40

5 years ago

0.4.39

5 years ago

0.4.38

5 years ago

0.4.37

5 years ago

0.4.36

5 years ago

0.4.34

5 years ago

0.4.33

5 years ago

0.4.32

5 years ago

0.4.31

5 years ago

0.4.30

5 years ago

0.4.29

5 years ago

0.4.28

5 years ago

0.4.27

5 years ago

0.4.26

5 years ago

0.4.25

5 years ago

0.4.24

5 years ago

0.4.23

5 years ago

0.4.22

5 years ago

0.4.21

5 years ago

0.4.20

5 years ago

0.4.19

5 years ago

0.4.18

5 years ago

0.4.17

5 years ago

0.4.16

5 years ago

0.4.15

5 years ago

0.4.14

5 years ago

0.4.13

5 years ago

0.4.12

5 years ago

0.4.10

5 years ago

0.4.11

5 years ago

0.4.9

5 years ago

0.4.8

5 years ago

0.4.7

5 years ago

0.4.6

5 years ago

0.4.5

5 years ago

0.4.4

5 years ago

0.4.3

5 years ago

0.4.1

5 years ago

0.4.2

5 years ago

0.3.5

5 years ago

0.4.0

5 years ago

0.3.4

5 years ago

0.3.3

5 years ago

0.3.2

5 years ago

0.3.1

5 years ago

0.3.0

5 years ago

0.2.8

5 years ago

0.2.7

5 years ago

0.2.6

6 years ago

0.2.5

6 years ago

0.2.4

6 years ago

0.2.3

6 years ago

0.2.2

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago

0.0.1

6 years ago