Ant设计响应NavBar问题

Question

更新:

让我澄清一下自己.我不想要补充工具栏(在我的情况下,它是一个小网站,而不是很多页面).我想要的是在重新调整Menu.Items可以折叠并成为汉堡包图标时拥有一个顶级NavBar.另外,我在右侧需要2个menu.items.

---

我正在使用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>

所以我再次阅读该文档,并认为我必须在菜单中使用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>

请帮忙.谢谢

Answer 1

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

他们为移动设备提供了单独的软件包。在Ant Design Mobile中，有单独的Web组件部分。在该部分中，您可以找到一个适用于移动设备汉堡包图标的菜单组件。

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

Answer 2

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

该组件接受 Ant Menu 标记作为 prop 并根据视口宽度有条件地呈现 Menu，或者按原样（对于桌面），或者在将包装传递的菜单标记（对于移动设备）的 Popover 组件中。

我包含了当视口足够窄以仅呈现汉堡包图标时它的外观的屏幕截图。

您可以在此处找到带有工作示例的 Github 存储库。

希望能帮助到你。