서랍 구성 요소 뒤의 material-ui overlay div

Question

React 앱에서 material-ui를 사용하고 있습니다. 사이드 메뉴 "서랍"구성 요소를 사용하고 있지만 열린 메뉴 뒤에 반투명 배경 오버레이를 포함시키는 방법을 알아낼 수 없습니다.

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

Answer 1

도킹 된 예는 배경없이 서랍을 제시한다.

도킹 해제 된 예제는 클릭 할 때 서랍을 숨기는 반투명 배경을 서랍에 제공합니다.

차이점은 docked 속성에 있습니다. true이면 서랍이 고정되어 배경이 없습니다. false이면 배경이 표시됩니다.

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> 
    ); 
    } 
} 

검토 대한 추가 정보에 대한 Drawer demos and API docs.

참고 : 미래 독자를 위해, 이것은 material-ui v0.x와 관련이 있습니다. 버전 1.0.0-beta24의 Drawer 최신 버전은 크게 개선되어 발행 된 Material Design standards과 더욱 호환됩니다.