如何使用 React 的 Material UI 创建响应式侧边栏组件?
How do I create a responsive sidebar component using React's Material UI?
我正在尝试使用 React material 设计创建响应式侧边栏,但找不到实现它的方法。
侧边栏打开时页面内容应响应,侧边栏不应覆盖页面内容。
它应该看起来像 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>
Material ui 抽屉不支持这个功能。
您可以在 material ui 存储库上查看此问题 #4752,其中有人通过 css 实现了此功能。
https://github.com/callemall/material-ui/issues/4752
在组件中:
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%;
}
我对这个问题的解决方案是根据抽屉打开状态添加边距。同时检查视口宽度,因此内容不会在小型设备上被挤压。
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>
)
}
您可以使用 JavaScript 内置方法 onresize
。
看看这个。使用 javascript 内置的 onresize 方法
在新 window 中打开代码输出并检查响应。
我正在尝试使用 React material 设计创建响应式侧边栏,但找不到实现它的方法。
侧边栏打开时页面内容应响应,侧边栏不应覆盖页面内容。
它应该看起来像 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>
Material ui 抽屉不支持这个功能。 您可以在 material ui 存储库上查看此问题 #4752,其中有人通过 css 实现了此功能。 https://github.com/callemall/material-ui/issues/4752
在组件中:
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%;
}
我对这个问题的解决方案是根据抽屉打开状态添加边距。同时检查视口宽度,因此内容不会在小型设备上被挤压。
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>
)
}
您可以使用 JavaScript 内置方法 onresize
。
看看这个。使用 javascript 内置的 onresize 方法 在新 window 中打开代码输出并检查响应。