The navigation drawer slides in from the left. It is a common pattern found in Google apps and follows the keylines and metrics for lists.
import Drawer from 'react-toolbox/drawer';
class DrawerTest extends React.Component {
handleClick = () => {
this.refs.drawer.show();
};
render () {
return (
<div>
<Button kind='raised' accent label='Show Drawer' onClick={this.handleClick} />
<Drawer ref='drawer' hideable>
<h5>This is your Drawer.</h5>
<p>You can embed any content you want, for example a Menu.</p>
</Drawer>
</div>
);
}
}| Name | Type | Default | Description |
|---|---|---|---|
active |
Boolean |
false |
If true, the drawer will be active by default. |
className |
String |
'' |
Sets a class to give customized styles to the drawer. |
hideable |
Bool |
true |
If true, the drawer will be hidden by clicking the overlay. |
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. |
The Drawer has state to determine if it is being shown or not. It exposes methods to show and hide:
showis used to show the drawer.hideis used to hide the drawer.