でサイドバーを作りますサイドバーがトグルされると、右側のコンテンツが非表示になります。私はサイドバーがトグルされたときに、コンテンツが右に押し出され、サイドバーとコンテンツがそれぞれ独自のスクロールバーを持つようにしたい。ここに私の現在のコードは次のとおりです。が、私はこの1つのように右のナビゲーションメニューを作成することにより、材料-UIを学んでいる材料-UI
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);
私はまた、引き出しが開かれ、右にコンテンツをプッシュする、同じ質問を持っています。 –
ここに答えがあります。 https://stackoverflow.com/questions/40620302/how-to-get-material-ui-drawer-to-squeeze-other-content-when-open/40640154#40640154 ---- Jeff McCloud作成 –