81acda7162
* Add postcss-next postcss-include and reporter
* Add stylelint
* Add CSS colors
* Add CSS custom media queries
* Use dashes for CSS colors
* Add base CSS variables
* Remove AppBar SASS dependency from spec page
* Migrate AppBar style to PostCSS
* Migrate Avatar style to PostCSS
* Migrate Ripple style to PostCSS
* Remove unneeded media CSS import in Avatar
* Add shadows to CSS variables
* Migrate Button style to PostCSS
* Update webpack test config and linting from npm
* Migrate Input style to PostCSS
* Add missing input config variables for Dropdown and Autocomplete
* Migrate Chip style to PostCSS
* Migrate Autocomplete style to PostCSS
* Migrate Dropdown style to PostCSS
* Migrate animations to PostCSS
* Migrate Card style to PostCSS
* Migrate Checkbox style to PostCSS
* Migrate DataPicker style to PostCSS
* Migrate Dialog style to PostCSS
* Migrate Drawer style to PostCSS
* Add postcss-mixins and postcss-each
* Migrate Layout style to PostCSS
* Fix bug in button theme
* Bugfix in avatar css
* Add some missing nesting notations
* Migrate Link style to PostCSS
* Migrate List style to PostCSS
* Migrate Menu style to PostCSS
* Migrate Navigation style to PostCSS
* Migrate Overlay style to PostCSS
* Migrate ProgressBar style to PostCSS
* Migrate Radio style to PostCSS
* Migrate Slider style to PostCSS
* Migrate Snackbar style to PostCSS
* Migrate Switch style to PostCSS
* Migrate Table style to PostCSS
* Migrate Tabs style to PostCSS
* Migrate TimePicker to PostCSS
* Migrate Tooltip styles to PostCSS
* Update webpack config for testing and tests
* Migrate commons to PostCSS
* Remove sass from main project
* Bye from docs to sass
* Build with CSS
* Remove unneded deps for sass in docs subproject
* Fix tests
* use 4p shadow in AppBar as spec indicates
* Fixed typo in list/config.css
* Fix tests
* Fix linter errors
* Latest build
* Release 2.0.0-beta.0
* Remove sass lint
* fixes old sass var in css config
* Update linter
* New Table implementation
* Fix old sass var in list/config.css
See
|
||
---|---|---|
.. | ||
Drawer.js | ||
config.css | ||
index.d.ts | ||
index.js | ||
readme.md | ||
theme.css |
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>
);
}
}
If you want to provide a theme via context, the component key is RTDrawer
.
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. |
insideTree |
Boolean |
false |
If true the Drawer is rendered inside the normal tree. |
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. |
withOverlay |
String |
true |
If true display an Overlay that locks the scroll when the Drawer is active. |
Theme
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. |
wrapper |
A wrapper class for the top of the root. |