2015-10-31 23:39:51 +03:00
# Drawer
2016-11-06 22:18:36 +03:00
The [navigation drawer ](https://material.google.com/patterns/navigation-drawer.html ) slides in from the left. It is a common pattern found in Google apps and follows the keylines and metrics for lists.
2015-10-31 23:39:51 +03:00
<!-- example -->
```jsx
2015-11-10 13:07:43 +03:00
import Drawer from 'react-toolbox/lib/drawer';
2015-10-31 23:39:51 +03:00
class DrawerTest extends React.Component {
2015-11-05 13:45:23 +03:00
state = {
active: false
};
2016-03-25 17:16:59 +03:00
2015-11-05 13:45:23 +03:00
handleToggle = () => {
this.setState({active: !this.state.active});
2015-10-31 23:39:51 +03:00
};
render () {
return (
< div >
2015-11-17 23:49:27 +03:00
< Button label = 'Show Drawer' raised accent onClick = {this.handleToggle} / >
2016-05-29 13:54:29 +03:00
< Drawer active = {this.state.active} onOverlayClick = {this.handleToggle} >
2015-10-31 23:39:51 +03:00
< h5 > This is your Drawer.< / h5 >
< p > You can embed any content you want, for example a Menu.< / p >
< / Drawer >
< / div >
);
}
}
2015-07-01 09:38:07 +03:00
```
2016-05-29 13:54:29 +03:00
If you want to provide a theme via context, the component key is `RTDrawer` .
2015-07-01 09:38:07 +03:00
## Properties
| Name | Type | Default | Description|
2015-10-31 23:55:12 +03:00
|:-----|:-----|:-----|:-----|
2016-03-25 17:16:59 +03:00
| `active` | `Boolean` | `false` | If true, the drawer will be visible.|
| `className` | `String` | `''` | Sets a class to give customized styles to the drawer.|
2017-01-05 04:42:18 +03:00
| `insideTree` | `Boolean` | `false` | If true the Drawer is rendered inside the normal tree.|
2016-03-25 17:16:59 +03:00
| `onOverlayClick` | `Function` | | Callback function to be invoked when the overlay is clicked.|
| `type` | `String` | `left` | Type of drawer. It can be `left` or `right` to display the drawer on the left or right side of the screen.|
2017-01-05 04:42:18 +03:00
| `withOverlay` | `String` | `true` | If true display an Overlay that locks the scroll when the Drawer is active.|
2016-05-22 14:42:52 +03:00
2016-05-29 13:54:29 +03:00
## Theme
2016-05-22 14:42:52 +03:00
| Name | Description|
|:---------|:-----------|
| `active` | Used for the root class when the drawer is active.|
| `content` | Used for the drawer content.|
| `drawer` | Root class.|
| `left` | Added to the root class when drawer is to the left.|
| `right` | Added to the root class when drawer is to the right.|
2017-01-05 04:42:18 +03:00
| `wrapper` | A wrapper class for the top of the root.|