@highlight-ui/drawer NPM | npm.io

5.4.7 • Published 8 months ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

8 months ago

@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

Prop	Type	Required	Default	Description
`visible`	`boolean`	No	`false`	Controls the visibility of the drawer
`children`	`React.ReactNode`	No		Should be an instance of `DrawerHeader` followed by an instance of `DrawerBody`
`drawerClassName`	`string`	No		Allows providing a custom class name for the drawer
`closeKey`	`React.KeyboardEvent['key']`	No	`Escape`	Event keycode that should trigger the drawer to close
`disabledBodyScrolling`	`boolean`	No	`true`	Controls the scrolling behavior of the document when the drawer is open
`leftOffset`	`React.CSSProperties['left']`	No	`280px`	Controls the width of the drawer: `(100% - leftOffset)`
`topOffset`	`React.CSSProperties['top']`	No	`0px`	Controls the height of the drawer: `(100% - topOffset)`
`onClose`	`() => void`	No		Callback that is invoked after the drawer is closed
`onOpen`	`() => void`	No		Callback that is invoked after the drawer is opened
`onRequestToClose`	`() => void`	No		Callback that is invoked when the close key is pressed (if `preventToClose` is set to `false`)
`preventToClose`	`boolean`	No	`false`	Controls whether the `onRequestToClose` callback should be executed or not
`enableBackdrop`	`boolean`	No	`false`	Controls the visibility of the backdrop
`onBackdropClick`	`() => void`	No		Callback that is invoked when user clicks on the backdrop
`backdropClassName`	`string`	No		Allows providing a custom class name for the backdrop

DrawerHeader

Prop	Type	Required	Default	Description
`fixed`	`boolean`	No	`false`	Controls whether the drawer header should be fixed (when scrolling)
`className`	`string`	No		Allows providing a custom class name

DrawerBody

Prop	Type	Required	Default	Description
`className`	`string`	No		Allows 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

8 months 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

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

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

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

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

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