Material-UI 水平菜单（移动友好）

Question

您好，我正在尝试创建一个使用 Material-UI 的 UI，但如果用户在移动设备。

我目前使用标签至少是可滑动的（左和右）但我想远离这个并创建一个水平的菜单，但如果移动设备也可以折叠成滑入菜单.

我知道我可以使用 Hidden，它只会在宽度相同时显示它，但我需要一些更平滑的东西 - 比如 Bootstrap.

Answer 1

我希望我能正确理解这个问题，但听起来您想要的是检查用户设备的屏幕尺寸，然后呈现上面提到的侧边菜单。

Material-ui 确实有类似于 Bootstrap 的网格系统，它还有实用程序可以根据媒体查询隐藏项目，您可以在此处找到 https://material-ui.com/system/display/

您还可以通过 React 训练查看这个库，它允许基于媒体查询轻松渲染 https://github.com/ReactTraining/react-media

希望对您有所帮助！

Answer 2

使用 Material-UI，您可能必须使用 Hidden 才能获得以像素为单位的屏幕宽度。

如果您想进行完全不同的渲染，可以查看 react-device-detect，这是一个用于检测 React 应用运行所在设备类型的库。使用库提供的 isMobile 函数并相应地进行渲染。

示例代码：

import { isMobile } from 'react-device-detect';

const myComponent = () => (
    <div>
        {isMobile ?
            // code that will run on phones and tablets
            :
            // code that will run on PCs
        }
    </div>
)

export default myComponent;

Material-UI 水平菜单（移动友好）

Material-UI horizontal menu (mobile friendly)

css

menu

material-ui