使用 material-ui 制作侧边栏

Question

我正在学习 material-ui，方法是像这样制作正确的导航菜单：http://demo.geekslabs.com/materialize/v3.1/ or least like this: http://www.material-ui.com/#/components/app-bar

我正在使用抽屉制作我的侧边栏，问题是当侧边栏被切换时，它隐藏了右边的内容。我想当我的侧边栏被切换时，它发生并将内容推到右侧并且侧边栏和内容都有自己的滚动条。这是我当前的代码：

Sidebar.js:

import React from 'react';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import RaisedButton from 'material-ui/RaisedButton';
import AppBar from 'material-ui/AppBar';

export default class Sidebar 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 (
            <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
                <div>
                    <RaisedButton
                        label="Open Drawer"
                        onTouchTap={this.handleToggle}
                    />
                    <Drawer
                        containerStyle={{height: 'calc(100% - 64px)', top: 64}}
                        docked={true}
                        width={200}
                        open={this.state.open}
                        onRequestChange={(open) => this.setState({open})
                        }
                    >
                        <AppBar title="AppBar" />
                        <MenuItem onTouchTap={this.handleClose}>Menu Item</MenuItem>
                        <MenuItem onTouchTap={this.handleClose}>Menu Item 2</MenuItem>
                    </Drawer>
                </div>
            </MuiThemeProvider>
        );
    }
}

我的Layout.js:

import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Layout.css';
import Header from '../Header';
import Feedback from '../Feedback';
import Footer from '../Footer';
import Sidebar from '../Sidebar';

import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import AppBar from 'material-ui/AppBar';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

function Layout({ children }) {
  return (
    <div>
        <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
            <AppBar title="My web" />
        </MuiThemeProvider>

      <Sidebar/>
      {React.Children.only(children)}
      <Feedback />
      <Footer />
    </div>
  );
}

Layout.propTypes = {
  children: PropTypes.element.isRequired,
};

export default withStyles(s)(Layout);

Answer 1

这是设计使然。 “Material设计”，即:)

https://material.io/archive/guidelines/patterns/navigation-drawer.html

您要求的将不再是抽屉，如 Material 设计规范所述。 Material-ui 尝试忠实地遵循该规范。

您可能必须创建自己的组件，因为我认为您无法充分操纵 Drawer 组件呈现的标记和内联 CSS 来完成您正在寻找的内容对于.

Answer 2

我不确定 Material 设计是否在发布后发生了变化，但我认为 OP 正在描述规范中定义的 "Persistent" 抽屉。查看 "Behavior"。但是，material-ui 不提供永久抽屉。

使用当前 material-ui 抽屉有一个不错的解决方法，就是将内容向右推，宽度与抽屉相同。

Answer 3

这可以通过 Material-UI 的新版本来实现。

检查 this demos。

该行为在“持久性”标题下的 Material specification 中进行了描述。

提到的 Material-UI 版本是 v1.0.0-beta.38。到目前为止，我注意到它非常稳定。

使用 material-ui 制作侧边栏

Making Sidebar with material-ui

reactjs

material-ui