如何使用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 repo上查看这个问题＃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>
    )
}