History

Peter Fern 58e4e1e46c Replace `overflow-y: scroll` with `overflow-y: auto` A number of components used `overflow-y`: scroll, which forces scrollbars to be always visible. To work around this, `commons.scss` hid webkit scrollbars globally. There are two problems with this: on non-webkit browsers, scrollbars are visible even when they are unnecessary; and scrollbars are hidden in webkit browsers, even on elements where they may be desirable. Instead, we use `overflow-y: auto`, and hide webkit scrollbars on specific components when necessary. Unfortunately, this requires using element selectors, but this is the trade-off for better supporting non-webkit browsers and allowing scrollbars on regular elements (like body). Fixes #218		2015-12-19 14:08:30 +01:00
..
Drawer.jsx	Use ClassNames in Drawer	2015-11-28 15:32:58 +01:00
_config.scss	Remove opacity prop from Overlay and add invisible. Fixes #183 , #178	2015-12-11 18:01:24 +01:00
index.js	Remove jsx extension from imports in components	2015-11-28 20:24:46 +01:00
readme.md	Change button properties and support toggle icon buttons	2015-11-17 21:49:27 +01:00
style.scss	Replace `overflow-y: scroll` with `overflow-y: auto`	2015-12-19 14:08:30 +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.