reactjs – React – Material-UI响应AppBar和抽屉

发布时间：2020-12-15 05:07:13 所属栏目：百科来源：网络整理

导读：有谁知道如何或知道如何创建一个被动的应用程序栏和抽屉的任何示例？它需要能够动态地取消对接抽屉并在浏览器较小时隐藏,并在较大时将抽屉停靠,最好动态像材料-ui网站已经做的那样：http://www.material-ui.com/#/components/drawer 您可以像这样监听compon

有谁知道如何或知道如何创建一个被动的应用程序栏和抽屉的任何示例？

它需要能够动态地取消对接抽屉并在浏览器较小时隐藏,并在较大时将抽屉停靠,最好动态像材料-ui网站已经做的那样：http://www.material-ui.com/#/components/drawer

您可以像这样监听componentWillMount中的屏幕大小更改,我确信有更好的方法,但这可行.

toggleOpenDrawer = () => {
    if (!this.state.mobile) {
        return;
    }
    this.setState({
        open: !this.state.open
    })
}

setSmall = () => {
    this.setState({open: false,docked: false,mobile: true})
}

setLarge = () => {
    this.setState({open: true,docked: true,mobile: false})
}

componentWillMount() {
  const mediaQuery = window.matchMedia('(min-width: 768px)');
  if (mediaQuery.matches) {
    this.setLarge()
  } else {
    this.setSmall()
  }
  mediaQuery.addListener((mq) => {
    if (mq.matches) {
      this.setLarge()
    } else {
      this.setSmall()
    }
  });
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!