web-dev-qa-db-fra.com

Faire de la barre latérale avec matériel-ui

j'apprends à comprendre le matériel en faisant le bon menu de navigation comme celui-ci: http://demo.geekslabs.com/materialize/v3.1/ ou du moins comme ceci: http: // www. material-ui.com/#/components/app-bar

J'utilise Drawer pour créer ma barre latérale. Le problème est que lorsque la barre latérale est basculée, le contenu est masqué à droite. Je veux que lorsque ma barre latérale est basculée, cela a eu lieu et Poussez le contenu vers la droite et la barre latérale et le contenu ont leur propre barre de défilement. Voici mon code actuel:

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

Mon 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);
reactjsmaterial-ui
8
methis

C'est par conception. "Material Design", c'est-à-dire :)

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

Ce que vous demandez ne serait plus un tiroir, comme le décrit la spécification Material Design. Material-ui tente de suivre cette spécification fidèlement.

Vous devrez probablement créer votre propre composant, car je ne pense pas que vous serez capable de manipuler suffisamment le balisage et les CSS en ligne rendus par le composant Drawer pour accomplir ce que vous recherchez.

6
Jeff McCloud

Cela peut être accompli avec la nouvelle version de Material-UI.

Vérifiez this demos out.

Le comportement est décrit dans la spécification Material sous l'en-tête "Persistent".

La version mentionnée de Material-UI est v1.0.0-beta.38. Jusqu'ici je l'ai remarqué très stable.

2
Daniel Duarte

Je ne suis pas sûr que la conception des matériaux ait changé depuis sa publication mais je pense que OP décrit le tiroir "persistant" défini dans la spécification. Regardez sous "Comportement". Cependant, material-ui ne fournit pas de tiroir persistant. 

Voici un travail correct en utilisant le tiroir matériel-ui actuel en poussant le contenu vers la droite de la même largeur que le tiroir.

Comment faire pour que Material-UI Drawer «écrase» un autre contenu lorsqu'il est ouvert

2
Byron