5.4.5 • Published 3 months ago

@highlight-ui/drawer v5.4.5

Weekly downloads
-
License
MIT
Repository
-
Last release
3 months ago

npm personio.design storybook.personio.design

@highlight-ui/drawer

Installation

Using npm:

npm install @highlight-ui/drawer

Using yarn:

yarn add @highlight-ui/drawer

Using pnpm:

pnpm install @highlight-ui/drawer

In your (S)CSS file:

@import url('@highlight-ui/drawer');

Once the package is installed, you can import the library:

import { Drawer, DrawerHeader, DrawerBody } from '@highlight-ui/drawer';

Usage

import React from 'react';
import { Drawer, DrawerHeader, DrawerBody } from '@highlight-ui/drawer';

export default function DrawerExample() {
  return (
    <Drawer visible={false} onClose={handleOnClose} onOpen={handleOnOpen}>
      <DrawerHeader>
        <Typography component="h1" token="heading-2xl">
          Drawer
        </Typography>
      </DrawerHeader>
      <DrawerBody>Drawer content</DrawerBody>
    </Drawer>
  );
}

Props 📜

Drawer

PropTypeRequiredDefaultDescription
visiblebooleanNofalseControls the visibility of the drawer
childrenReact.ReactNodeNoShould be an instance of DrawerHeader followed by an instance of DrawerBody
drawerClassNamestringNoAllows providing a custom class name for the drawer
closeKeyReact.KeyboardEvent['key']NoEscapeEvent keycode that should trigger the drawer to close
disabledBodyScrollingbooleanNotrueControls the scrolling behavior of the document when the drawer is open
leftOffsetReact.CSSProperties['left']No280pxControls the width of the drawer: (100% - leftOffset)
topOffsetReact.CSSProperties['top']No0pxControls the height of the drawer: (100% - topOffset)
onClose() => voidNoCallback that is invoked after the drawer is closed
onOpen() => voidNoCallback that is invoked after the drawer is opened
onRequestToClose() => voidNoCallback that is invoked when the close key is pressed (if preventToClose is set to false)
preventToClosebooleanNofalseControls whether the onRequestToClose callback should be executed or not
enableBackdropbooleanNofalseControls the visibility of the backdrop
onBackdropClick() => voidNoCallback that is invoked when user clicks on the backdrop
backdropClassNamestringNoAllows providing a custom class name for the backdrop

DrawerHeader

PropTypeRequiredDefaultDescription
fixedbooleanNofalseControls whether the drawer header should be fixed (when scrolling)
classNamestringNoAllows providing a custom class name

DrawerBody

PropTypeRequiredDefaultDescription
classNamestringNoAllows providing a custom class name

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.

@highlight-ui/utils-commons
@infinitebrahmanuniverse/nolb-_hig@everything-registry/sub-chunk-395@zalastax/nolb-_hig
5.4.5

3 months ago

5.4.4

5 months ago

5.3.29

10 months ago

5.3.28

10 months ago

5.3.27

10 months ago

5.3.26

10 months ago

5.3.25

10 months ago

5.3.24

10 months ago

5.3.23

10 months ago

5.3.22

10 months ago

5.3.21

10 months ago

5.3.20

10 months ago

5.3.19

10 months ago

5.3.18

10 months ago

5.3.17

10 months ago

5.4.3

7 months ago

5.4.2

7 months ago

5.4.1

7 months ago

5.4.0

7 months ago

5.4.0-r18.0

8 months ago

5.3.49

7 months ago

5.3.48

7 months ago

5.3.47

7 months ago

5.3.46

7 months ago

5.3.45

8 months ago

5.3.44

8 months ago

5.3.43

8 months ago

5.3.42

8 months ago

5.3.41

8 months ago

5.3.40

8 months ago

5.3.39

9 months ago

5.3.38

9 months ago

5.3.37

9 months ago

5.3.36

9 months ago

5.3.35

9 months ago

5.3.34

9 months ago

5.3.33

9 months ago

5.3.32

9 months ago

5.3.31

9 months ago

5.3.30

9 months ago

5.3.16

12 months ago

5.3.15

12 months ago

5.3.14

12 months ago

5.3.13

12 months ago

5.3.12

1 year ago

5.3.11

1 year ago

5.3.10

1 year ago

5.3.9

1 year ago

5.3.8

1 year ago

5.3.3

1 year ago

5.3.2

1 year ago

5.3.7

1 year ago

5.3.6

1 year ago

5.3.5

1 year ago

5.3.4

1 year ago

5.3.1

1 year ago

5.3.0

1 year ago

5.0.22

1 year ago

5.1.9

1 year ago

5.1.8

1 year ago

5.1.7

1 year ago

5.1.6

1 year ago

5.1.5

1 year ago

5.1.4

1 year ago

5.1.3

1 year ago

5.1.2

1 year ago

5.1.1

1 year ago

5.1.0

1 year ago

5.2.5

1 year ago

5.2.4

1 year ago

5.2.3

1 year ago

5.2.2

1 year ago

5.2.1

1 year ago

5.2.0

1 year ago

5.1.16

1 year ago

5.1.15

1 year ago

5.1.14

1 year ago

5.1.13

1 year ago

5.1.12

1 year ago

5.1.11

1 year ago

5.1.10

1 year ago

5.0.20

2 years ago

5.0.17

2 years ago

5.0.18

2 years ago

5.0.15

2 years ago

5.0.16

2 years ago

5.0.0-alpha.1

2 years ago

5.0.8

2 years ago

5.0.7

2 years ago

5.0.6

2 years ago

5.0.5

2 years ago

5.0.4

2 years ago

5.0.3

2 years ago

5.0.2

2 years ago

5.0.1

2 years ago

5.0.10

2 years ago

5.0.0

2 years ago

5.0.11

2 years ago

5.0.12

2 years ago

5.0.13

2 years ago

5.0.14

2 years ago

5.0.0-alpha.0

2 years ago

1.0.3

2 years ago

4.0.26

2 years ago

4.0.25

2 years ago

4.0.24

2 years ago

4.0.23

2 years ago

4.0.22

2 years ago

4.0.19

2 years ago

4.0.21

2 years ago

4.0.20

2 years ago

4.0.18

2 years ago

4.0.17

2 years ago

4.0.16

3 years ago

4.0.15

3 years ago

4.0.14

3 years ago

4.0.13

3 years ago

4.0.12

3 years ago

4.0.11

3 years ago

4.0.9

3 years ago

4.0.10

3 years ago

4.0.8

3 years ago

4.0.7

3 years ago

4.0.5

3 years ago

4.0.6

3 years ago

4.0.4

3 years ago

4.0.1

3 years ago

4.0.3

3 years ago

4.0.2

3 years ago

3.0.5

3 years ago

4.0.0

3 years ago

3.0.4

3 years ago

3.0.3

3 years ago

3.0.2

3 years ago

3.0.1

3 years ago

2.1.9

3 years ago

3.0.0

3 years ago

2.1.6

3 years ago

2.1.8

3 years ago

2.1.7

3 years ago

2.1.5

3 years ago

2.1.2

3 years ago

2.1.1

3 years ago

2.1.4

3 years ago

2.1.3

3 years ago

2.0.7

3 years ago

2.1.0

3 years ago

2.0.6

3 years ago

2.0.5

3 years ago

2.0.4

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago