react-toolbox/components/drawer
Enzo Martin addc7f312b Remove all `unquote` calls
- Use SASS RGBA directly when modifying the opacity
2015-11-19 12:21:51 +01:00
..
_config.scss Remove all `unquote` calls 2015-11-19 12:21:51 +01:00
index.jsx Use Overlay component in drawers 2015-11-14 22:00:35 +01:00
readme.md Change button properties and support toggle icon buttons 2015-11-17 21:49:27 +01:00
style.scss Use Overlay component in drawers 2015-11-14 22:00:35 +01:00

readme.md

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.