如何使用React的Material UI創建響應邊欄組件？

Question

我正在嘗試使用反應材料設計創建響應式側欄，但無法找到實現它的方法。

側邊欄打開時，頁面內容應該有響應，邊欄不應該疊加在頁面內容上。

它應該看起來像https://blackrockdigital.github.io/startbootstrap-simple-sidebar/。

到目前爲止的代碼是：

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

 
    export default class DrawerOpenRightExample extends React.Component { 
 

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

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

 
     render() { 
 

 
      return (
 
       <div> 
 
        <container> 
 
        //will have a form here 
 

 
        <RaisedButton 
 
         label="Toggle Drawer" 
 
         onTouchTap={this.handleToggle.bind(this)} 
 
        /> 
 
        </container> 
 
        <Drawer width={400} openSecondary={true} open={this.state.open} > 
 
         <AppBar title="AppBar" /> 
 
        </Drawer> 
 
       </div> 
 
      ); 
 
     } 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

材料UI抽屜真的不支持此功能。 您可以在材料ui回購中檢出此問題＃4752，其中某人通過css實現了此功能。 https://github.com/callemall/material-ui/issues/4752

Answer 2

在組件：

export default class sidebar3 extends React.Component { 

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

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

render() { 
    const styles = { 
      block: { 
       maxWidth: 250, 
      }, 
      toggle: { 
       marginBottom: 16, 
      }, 
      thumbOff: { 
       backgroundColor: '#ffcccc', 
      }, 
      trackOff: { 
       backgroundColor: '#ff9d9d', 
      }, 
      thumbSwitched: { 
       backgroundColor: 'red', 
      }, 
      trackSwitched: { 
       backgroundColor: '#ff9d9d', 
      }, 
      labelStyle: { 
       color: 'red', 
      } 

    }; 

    return (
     <div> 

      <Drawer width={'30%'} open={this.state.open} openSecondary={true} containerStyle={{top:'50px'}} zDepth={5}> 

      <TabsExampleSimple/> 

      </Drawer> 
      <div className={classnames('overlayContainer', {'expanded': this.state.open})}> 
       <RaisedButton 
        label="Toggle Drawer" 
        onTouchTap={this.handleToggle.bind(this)} 
       /> 
       <Toggle 
        label="Label on the right" 
        labelPosition="right" 
        style={styles.toggle} 
        defaultToggled={true} 
        onToggle={this.handleToggle.bind(this)} 

       /> 
       <component1/> 
       <component2/> 
      </div> 
     </div> 
    ); 
} 

，並在項目的CSS基於抽屜打開狀態

.overlayContainer{ 
    -moz-transition: all 218ms cubic-bezier(0.4, 0, 0.2, 1); 
    -o-transition: all 218ms cubic-bezier(0.4, 0, 0.2, 1); 
    -webkit-transition: all 218ms cubic-bezier(0.4, 0, 0.2, 1); 
    transition: all 218ms cubic-bezier(0.4, 0, 0.2, 1); 
    left: 0; 
    right:0; 
    width: auto !important; 
    position: fixed !important; 
    } 

    .overlayContainer.expanded{ 
    right: 32%; 
    } 

Answer 3

我對這個問題的解決是將保證金。同時檢查視口寬度，因此內容不會在小型設備上變形。

state = { 
    isOpen: true, 
    backdrop: false 
}; 

contentStyle() { 
    return { 
     marginLeft: this.state.isOpen && this.isDocked() 
      ? '256px' 
      : '0px', 
     transition: '0.3s' 
    } 
} 

isDocked() { 
    return window.innerWidth > 500 
} 

toggle() { 
    this.setState({isOpen: !this.state.isOpen}) 
} 

render() { 
    return (
     <div> 
      <SideMenu 
       isOpen={this.state.isOpen} 
       toggle={() => this.toggle()} 
       isDocked={this.isDocked()} 
      /> 
      <div style={this.contentStyle()}> 
       <Navbar toggle={() => this.toggle()} /> 
      </div> 
     </div> 
    ) 
}