CODEWITHSUNDEEP
reactjsmaterial-ui
user2994560
user2994560

Reputation: 1309

material-ui overlay div behind Drawer Component

I'm using material-ui in a React app. I'm using the side menu "Drawer" component but cannot figure out how to include the semi-transparent background overlay behind the open menu.

http://www.material-ui.com/#/components/drawer

Upvotes: 4

Views: 10040

Answers (2)

Conrad Davis jr.
Conrad Davis jr.

Reputation: 636

I've found this to work for me, I hope it helps. remove variant="persistent"

Upvotes: 2

Ken Gregory
Ken Gregory

Reputation: 7380

The docked example presents the Drawer without the backdrop.

The undocked example presents the Drawer with a semi-transparent backdrop that hides the drawer when clicked.

The difference lies with the docked property. If true, the Drawer will be docked and there will be no backdrop. If false, the backdrop will be present.

import React from 'react';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import RaisedButton from 'material-ui/RaisedButton';

export default class DrawerUndockedExample extends React.Component {

  constructor(props) {
    super(props);
    this.state = {open: false};
  }

  handleToggle = () => this.setState({open: !this.state.open});

  handleClose = () => this.setState({open: false});

  render() {
    return (
      <div>
        <RaisedButton
          label="Open Drawer"
          onClick={this.handleToggle}
        />
        <Drawer
          docked={false}
          width={200}
          open={this.state.open}
          onRequestChange={(open) => this.setState({open})}
        >
          <MenuItem onClick={this.handleClose}>Menu Item</MenuItem>
          <MenuItem onClick={this.handleClose}>Menu Item 2</MenuItem>
        </Drawer>
      </div>
    );
  }
}

Review the Drawer demos and API docs for more info.

Note: For future readers, this concerns material-ui v0.x. The latest version of Drawer in version 1.0.0-beta24 has been drastically improved and is more compliant with the published Material Design standards.

Upvotes: 3

Related Questions