webentwicklung-frage-antwort-db.com.de

Seitenleiste mit Material-Ui erstellen

ich lerne Material-Ui, indem ich das rechte Navigationsmenü so mache: http://demo.geekslabs.com/materialize/v3.1/ oder am wenigsten so: http: // www. material-ui.com/#/components/app-bar

Ich verwende Drawer, um meine Seitenleiste zu erstellen. Das Problem ist, wenn die Seitenleiste umgeschaltet wird und der Inhalt rechts ausgeblendet wird. Ich möchte, wenn meine Seitenleiste umgeschaltet wird, sie stattgefunden hat und den Inhalt nach rechts schieben und sowohl die Seitenleiste als auch der Inhalt eine eigene Bildlaufleiste haben. Hier ist mein aktueller Code:

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

Meine 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);
8
methis

Dies ist beabsichtigt. "Material Design", das ist :)

https://material.google.com/patterns/navigation-drawer.html

Was Sie verlangen, wäre keine Schublade mehr, wie in der Material Design-Spezifikation beschrieben. Material-ui versucht dieser Spezifikation treu zu folgen.

Sie werden wahrscheinlich eine eigene Komponente erstellen müssen, da ich nicht denke, dass Sie das von der Drawer-Komponente gerenderte Markup und Inline-CSS ausreichend manipulieren können, um das zu erreichen, wonach Sie suchen.

6
Jeff McCloud

Dies kann mit der neuen Version der Material-UI erreicht werden.

Überprüfen Sie diese Demos aus.

Das Verhalten ist in der Material-Spezifikation unter der Überschrift "Persistent" beschrieben.

Die genannte Version der Material-UI ist v1.0.0-beta.38. Bisher habe ich es sehr stabil bemerkt.

2
Daniel Duarte

Ich bin nicht sicher, ob sich Material Design geändert hat, seit dies veröffentlicht wurde, aber ich denke, OP beschreibt "Persistent" Drawer, das in der Spezifikation definiert ist. Siehe unter "Verhalten". Material-ui bietet jedoch keine dauerhafte Schublade. 

Hier ist eine anständige Arbeit mit der aktuellen Material-Ui-Schublade, indem der Inhalt auf dieselbe Breite wie die Schublade nach rechts verschoben wird.

Wie bekomme ich die Material-UI-Schublade, um andere Inhalte zu "quetschen", wenn sie geöffnet ist

2
Byron