我在一个React应用中使用材料-UI。我正在使用侧面菜单"抽屉"组件,但无法弄清楚如何包括打开菜单后面的半透明背景覆盖。
http://www.material-ui.com/#/components/drawer
停靠的示例在没有背景的情况下呈现抽屉。
毫无控制的示例为抽屉提供了一个半透明的背景,该背景在单击时隐藏了抽屉。
差异在于docked
属性。如果是真的,则抽屉将被停靠,不会有背景。如果是错误的,则将存在背景。
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>
);
}
}
查看抽屉演示和API文档以获取更多信息。
注意:对于将来的读者,这涉及材料-UI v0.x。1.0.0-Beta24版本中的最新版本的抽屉已大大改进,并且更符合已发表的材料设计标准。
我发现这对我有用,希望它有帮助。删除variant="persistent"