Question

您好，我正在尝试创建一个使用Material-UI的UI，但是如果用户正在移动设备上访问，它将允许我将菜单移至可折叠样式菜单。

我目前至少使用选项卡，因为它至少是可滑动的（向左和向右），但是我想离开它，创建一个水平的菜单，但如果移动设备也可以折叠到菜单中的幻灯片中。 / p>

我知道我可以使用Hidden（隐藏），仅当宽度相同时才显示它，但是我需要更平滑的东西-如Bootstrap。

Answer 1

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

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

您还可以通过反应训练来查看该库，该库允许根据媒体查询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水平菜单（移动友好）

2 个答案: