@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
40 lines (30 loc) • 3.12 kB
Markdown
# Drawer
To implement Drawer component into your project you'll need to add the import:
```jsx
import Drawer from "@kiwicom/orbit-components/lib/Drawer";
```
After adding import into your project you can use it simply like:
```jsx
<Drawer shown>Content to show</Drawer>
```
## Props
Table below contains all types of the props available in the Drawer component.
| Name | Type | Default | Description |
| :------------ | :---------------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------ |
| actions | `React.Node` | | Actions - especially Buttons, that will be rendered on in the Drawer's header. |
| **children** | `React.Node` | | The content of the Drawer. |
| dataTest | `string` | | Optional prop for testing purposes. |
| noPadding | `boolean` | `false` | If `true` the wrapper won't have any inner padding. |
| onClose | `() => void \| Promise` | | Function for handling onClose event. |
| position | [`enum`](#enum) | `"right"` | The position on which side the Drawer should appear. |
| shown | `boolean` | `"true"` | If `true` the Drawer will be visible, otherwise visually hidden, but it will stay in the DOM. |
| suppressed | `boolean` | `false` | If `true`, the Drawer will have cloudy background. |
| title | `Translation` | | Title of the Drawer that will be rendered in the Drawer's header. |
| width | `string` | `"320px"` | The width of the Drawer. |
| lockScrolling | `boolean` | `true` | Whether to prevent scrolling of the rest of the page while Drawer is open. This is on by default to provide a better user experience. |
| fixedHeader | `boolean` | | If `true` the DrawerHeader will be fixed to the top. |
### enum
| position |
| :-------- |
| `"right"` |
| `"left"` |