Drawer
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/lib/drawer';
class DrawerTest extends React.Component {
state = {
active: false
};
handleToggle = () => {
this.setState({active: !this.state.active});
};
render () {
return (
<div>
<Button label='Show Drawer' raised accent onClick={this.handleToggle} />
<Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
<h5>This is your Drawer.</h5>
<p>You can embed any content you want, for example a Menu.</p>
</Drawer>
</div>
);
}
}
Properties
| Name |
Type |
Default |
Description |
active |
Boolean |
false |
If true, the drawer will be visible. |
className |
String |
'' |
Sets a class to give customized styles to the drawer. |
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. |
cdd6ee5f05