如何在移动视图中隐藏Material-Ui Mini抽屉 [英] How to hide Material-Ui Mini variant Drawer on mobile view
本文介绍了如何在移动视图中隐藏Material-Ui Mini抽屉的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在移动视图中隐藏Mini抽屉.我不希望移动视图上的侧栏.它应该隐藏在移动视图中.
我正在遵循官方文档
在移动视图中删除
解决方案
const抽屉宽度= 240;const styles = theme =>({根: {显示:"flex",},工具栏:{paddingRight:24,//抽屉关闭时保持右填充},工具栏图标:{显示:"flex",alignItems:'中心',justifyContent:'flex-end',填充:"0 8px",... theme.mixins.toolbar,},appBar:{zIndex:theme.zIndex.drawer + 1过渡:theme.transitions.create([''width','margin'],{缓动:theme.transitions.easing.sharp,持续时间:theme.transitions.duration.leavingScreen,}),},appBarShift:{marginLeft:抽屉宽度,宽度:`calc(100% - ${drawerWidth}px)`,过渡:theme.transitions.create([''width','margin'],{缓动:theme.transitions.easing.sharp,持续时间:theme.transitions.duration.enteringScreen,}),},menuButton:{marginLeft:12,marginRight:36,},menuButtonHidden:{显示:无",},标题: {flexGrow:1},抽屉纸:{位置:相对",whiteSpace:"nowrap",宽度:抽屉宽度,过渡:theme.transitions.create('width',{缓动:theme.transitions.easing.sharp,持续时间:theme.transitions.duration.enteringScreen,}),[theme.breakpoints.up('md')]:{位置:相对",},},cabinetPaperClose:{overflowX:隐藏",过渡:theme.transitions.create('width',{缓动:theme.transitions.easing.sharp,持续时间:theme.transitions.duration.leavingScreen,}),宽度:theme.spacing.unit * 7[theme.breakpoints.up('sm')]:{宽度:theme.spacing.unit * 9},},appBarSpacer:theme.mixins.toolbar,内容: {flexGrow:1填充:theme.spacing.unit * 3,高度:"100vh",溢出:自动",},chartContainer:{marginLeft:-22,},tableContainer:{高度:320,},});仪表板类扩展了React.Component {状态= {开放:错误,身份验证:是的,锚点:空,};handleDrawerOpen =()=>{this.setState({open:true});};handleDrawerClose =()=>{this.setState({open:false});};handleChange =事件=>{this.setState({auth:event.target.checked});};handleMenu = event =>{this.setState({anchorEl:event.currentTarget});};handleClose =()=>{this.setState({anchorEl:null});};使成为() {const {class,siteTitle,children,theme} = this.props;const {auth,anchorEl} = this.state;const open = Boolean(anchorEl);返回 (<反应片段>< CssBaseline/>< div className = {classes.root}>< AppBarposition =绝对"className = {classNames(classes.appBar,this.state.open&& classes.appBarShift)}style = {{background:'#051745',boxShadow:'none'}}><工具栏disableGutters = {!this.state.open} className = {classes.toolbar}>< IconButtoncolor ="inherit"aria-label =打开抽屉"onClick = {this.handleDrawerOpen}className = {classNames(classes.menuButton,this.state.open&&classes.menuButtonHidden,)}>< MenuIcon/></IconButton><版式变体="title" color ="inherit" noWrap className = {classes.title}>{网站标题}</Typography>< IconButton color ="inherit"><徽章标志内容={4} color="secondary">< NotificationsIcon/></徽章></IconButton>< div>< IconButtonaria-owns = {open吗?'menu-appbar':null}aria-haspopup ="true"onClick = {this.handleMenu}color ="inherit">< AccountCircle/></IconButton><菜单id ="menu-appbar"anchorEl = {anchorEl}anchorOrigin = {{垂直:顶部",水平:右",}}transformOrigin = {{垂直:顶部",水平:右",}}打开= {打开}onClose = {this.handleClose}>< MenuItem onClick = {this.handleClose}>个人资料</MenuItem>< MenuItem onClick = {this.handleClose}>我的帐户</MenuItem></菜单></div></工具栏></AppBar><隐藏的mdUp><抽屉variant ="temporary"onClose = {this.handleDrawerClose}类={{纸张:classNames(classes.drawerPaper,!this.state.open&& classes.drawerPaperClose),}}ModalProps = {{keepMounted:true,//更好的移动性能.}}打开= {this.state.open}>< div className = {classes.toolbarIcon}>{网站标题}< IconButton onClick = {this.handleDrawerClose}>< ChevronLeftIcon/></IconButton></div><除法器/><列表> {mainListItems}</List><除法器/>< List> {secondaryListItems}</List></抽屉></Hidden><隐藏的smDown实现="css"><抽屉variant =永久"类别= {{纸张:classNames(classes.drawerPaper,!this.state.open&& classes.drawerPaperClose),}}打开= {this.state.open}>< div className = {classes.toolbarIcon}>{网站标题}< IconButton onClick = {this.handleDrawerClose}>< ChevronLeftIcon/></IconButton></div><除法器/><列表> {mainListItems}</List><除法器/>< List> {secondaryListItems}</List></抽屉></Hidden>< main className = {classes.content}>< div className = {classes.appBarSpacer}/>{孩子们}<页脚/></main></div></React.Fragment>);}}Dashboard.propTypes = {类别:PropTypes.object.isRequired,主题:PropTypes.object.isRequired,};导出默认的withStyles(styles)(Dashboard);
How can I hide Mini variant drawer on mobile view. I don't want the side bar on mobile view. It should be hidden in mobile view.
I am following the official doc Original Code
Remove in mobile View
解决方案
const drawerWidth = 240;
const styles = theme => ({
root: {
display: 'flex',
},
toolbar: {
paddingRight: 24, // keep right padding when drawer closed
},
toolbarIcon: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '0 8px',
...theme.mixins.toolbar,
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
menuButton: {
marginLeft: 12,
marginRight: 36,
},
menuButtonHidden: {
display: 'none',
},
title: {
flexGrow: 1,
},
drawerPaper: {
position: 'relative',
whiteSpace: 'nowrap',
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
[theme.breakpoints.up('md')]: {
position: 'relative',
},
},
drawerPaperClose: {
overflowX: 'hidden',
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
width: theme.spacing.unit * 7,
[theme.breakpoints.up('sm')]: {
width: theme.spacing.unit * 9,
},
},
appBarSpacer: theme.mixins.toolbar,
content: {
flexGrow: 1,
padding: theme.spacing.unit * 3,
height: '100vh',
overflow: 'auto',
},
chartContainer: {
marginLeft: -22,
},
tableContainer: {
height: 320,
},
});
class Dashboard extends React.Component {
state = {
open: false,
auth: true,
anchorEl: null,
};
handleDrawerOpen = () => {
this.setState({ open: true });
};
handleDrawerClose = () => {
this.setState({ open: false });
};
handleChange = event => {
this.setState({ auth: event.target.checked });
};
handleMenu = event => {
this.setState({ anchorEl: event.currentTarget });
};
handleClose = () => {
this.setState({ anchorEl: null });
};
render() {
const { classes, siteTitle, children,theme } = this.props;
const { auth, anchorEl } = this.state;
const open = Boolean(anchorEl);
return (
<React.Fragment>
<CssBaseline />
<div className={classes.root}>
<AppBar
position="absolute"
className={classNames(classes.appBar, this.state.open && classes.appBarShift)}
style={{ background: '#051745', boxShadow: 'none' }}
>
<Toolbar disableGutters={!this.state.open} className={classes.toolbar}>
<IconButton
color="inherit"
aria-label="Open drawer"
onClick={this.handleDrawerOpen}
className={classNames(
classes.menuButton,
this.state.open && classes.menuButtonHidden,
)}
>
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" noWrap className={classes.title}>
{siteTitle}
</Typography>
<IconButton color="inherit">
<Badge badgeContent={4} color="secondary">
<NotificationsIcon />
</Badge>
</IconButton>
<div>
<IconButton
aria-owns={open ? 'menu-appbar' : null}
aria-haspopup="true"
onClick={this.handleMenu}
color="inherit"
>
<AccountCircle />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={open}
onClose={this.handleClose}
>
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
<MenuItem onClick={this.handleClose}>My account</MenuItem>
</Menu>
</div>
</Toolbar>
</AppBar>
<Hidden mdUp>
<Drawer
variant="temporary"
onClose={this.handleDrawerClose}
classes={{
paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
}}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
open={this.state.open}
>
<div className={classes.toolbarIcon}>
{siteTitle}
<IconButton onClick={this.handleDrawerClose}>
<ChevronLeftIcon />
</IconButton>
</div>
<Divider />
<List >{mainListItems}</List>
<Divider />
<List>{secondaryListItems}</List>
</Drawer>
</Hidden>
<Hidden smDown implementation="css">
<Drawer
variant="permanent"
classes={{
paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
}}
open={this.state.open}
>
<div className={classes.toolbarIcon}>
{siteTitle}
<IconButton onClick={this.handleDrawerClose}>
<ChevronLeftIcon />
</IconButton>
</div>
<Divider />
<List >{mainListItems}</List>
<Divider />
<List>{secondaryListItems}</List>
</Drawer>
</Hidden>
<main className={classes.content} >
<div className={classes.appBarSpacer} />
{children}
<Footer />
</main>
</div>
</React.Fragment>
);
}
}
Dashboard.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
};
export default withStyles(styles)(Dashboard);
这篇关于如何在移动视图中隐藏Material-Ui Mini抽屉的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文