Ant设计响应式导航栏

Question

我正在使用AntD，以为对普通和标准的响应式NavBar来说这是一个简单而快速的设置，但事实证明，默认情况下它没有响应：

如您所见，它已被压扁。

这里是代码：

<Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={["1"]}
                        style={{ lineHeight: '64px' }}
                        breakpoint="lg"
                        collapsedWidth="0"
                    >
                                <Menu.Item key="1">nav 1</Menu.Item>
                                <Menu.Item key="2">nav 2</Menu.Item>
                                <Menu.Item key="3">nav 3</Menu.Item>
                                <Menu.Item key="4"><Icon spin={true} type="plus-circle" className="publish-btn" /></Menu.Item>
                                <Menu.Item key="5"><Icon spin={true} type="login" className="loggin-btn" /></Menu.Item>
                    </Menu>

因此，我再次阅读了文档，并认为我必须使用Menu内的Grid才能使其响应。但是，它给我带来了错误：

这里是代码：

<Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={["1"]}
                        style={{ lineHeight: '64px' }}
                        breakpoint="lg"
                        collapsedWidth="0"
                    >

                        <Row key="1" gutter={16}>
                            <Col span={3} key="1">
                                <Menu.Item key="1">nav 1</Menu.Item>
                            </Col>
                            <Col span={3} key="2">
                                <Menu.Item key="2">nav 2</Menu.Item>
                            </Col>
                            <Col span={3} key="3">
                                <Menu.Item key="3">nav 3</Menu.Item>
                            </Col>
                            <Col span={3} offset={9} key="4">
                                <Menu.Item key="4"><Icon spin={true} type="plus-circle" className="publish-btn" /></Menu.Item>
                            </Col>
                            <Col span={3} key="5">
                                <Menu.Item key="5"><Icon type="login" className="loggin-btn" /></Menu.Item>
                            </Col>
                        </Row>
                    </Menu>

更新

让我澄清一下。我不需要侧边栏（因为在我的情况下，这是一个小型网站，页面不多）。我只想在调整Menu大小时拥有一个顶部的NavBar。项目可能会折叠并变成汉堡包图标。另外，我需要在右侧2个menu.items。

Answer 1

我在选择一个项目的Ant设计的决定时正在研究这个问题。响应式导航栏是常见的情况，但是我想知道为什么Ant Design中没有这种东西？然后，我在回购中搜索问题，并找到Ant Design Mobile作为对问题的评论。

他们有一个单独的移动设备包装。 Ant Design Mobile内部有web components的单独部分。在该部分中，您可以找到适合于移动设备汉堡包图标的Menu组件。

希望这对将来的读者有所帮助。

Answer 2

不久前我也在寻找这种功能，为了使Ant Menu具有响应性，我编写了一个简单的React Component。

[此组件接受Ant Menu标记作为道具，并根据视口宽度有条件地渲染菜单，要么按原样（对于桌面），要么在Popover组件中，该组件将包装传递的菜单标记（对于移动设备）。

我提供了一旦视口变窄到足以仅显示汉堡图标的外观的屏幕截图。

您可以找到带有示例here的Github存储库。

并且为了找到更详细的信息，它如何在后台查看我的帖子-Responsive Menu with Ant Design

希望有帮助。

Answer 3

首先澄清：antd文档“响应”（在文档的this example中）的意思是not导航栏项目重排，而sidebar折叠成一个较小的菜单或消失，并显示一个汉堡触发按钮。

第二：混合菜单和行/颜色是个坏主意。发生错误是因为Menu.Item应该是Menu的直接子元素，并且您通过Row / Col使其成为孙子，而他们没有传递相同的道具。

AntD不支持您的要求，如您的说明中所述。我的一个基于AntD的网站（https://racefox.se）的工作方式与您所寻找的类似。我在该站点上所做的工作是呈现两组菜单，一组用于桌面导航栏，另一组用于带有汉堡包的小屏幕侧栏，然后使用CSS媒体查询在@screen-sm断点的每一侧隐藏一个或另一个。