MUI - 响应式抽屉 [英] MUI - Responsive Drawer

问题描述

有谁知道如何创建响应式 Appbar 和 Drawer 的示例?

Does anyone know how to, or know of any examples of how to create a reactive Appbar and Drawer?

它需要能够在浏览器较小时动态取消停靠和隐藏抽屉，并在浏览器较大时停靠抽屉，最好像 MUI 站点已经做的那样动态:https://mui.com/components/drawers

It needs to be able to dynamically un-dock the drawer and hide when the browser is small and dock the drawer when larger, preferably dynamically like the MUI site already does: https://mui.com/components/drawers

推荐答案

你可以像这样在 componentWillMount 中监听屏幕大小的变化，我相信有更好的方法，但这是有效的.

You could listen for screen size changes in componentWillMount like this, I'm sure there are better methods but this works.

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()
    }
  });
}

这篇关于MUI - 响应式抽屉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！