如何在移动视图中隐藏Material-Ui Mini抽屉 [英] How to hide Material-Ui Mini variant Drawer on mobile view

问题描述

如何在移动视图中隐藏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屋！