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 components部分。在该部分中，您可以找到适合移动设备汉堡包图标的Menu组件。

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

Answer 2

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

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

我包括一旦视口足够窄以便只渲染汉堡包图标时它的外观截图。

您可以使用工作示例here找到Github回购。

为了找到更详细的信息，如何在引擎盖下结帐我的帖子 - Responsive Menu with Ant Design

希望它有所帮助。

Answer 3

对于响应行为，请使用 antd 的 Menu 组件中的“overflowedIndicator”属性。您可以选择在菜单折叠时显示的任何 antd 图标。使用 antd 的 Grid 功能（Col xl,lg,md,sm,xs）属性控制菜单何时折叠。

请查看下面的示例以获取简单的响应式导航栏：

import React from 'react';
import { Row, Col, Typography, Layout, Menu } from 'antd';
import { MenuOutlined } from '@ant-design/icons';

const { Header, Content } = Layout;
const { Title } = Typography;

export interface NavBarProps {
    selectedPage: string;
    children: React.ReactNode;
}

export const NavBar: React.FC<NavBarProps> = (props: NavBarProps) => {

const gotoPage = (page: string) => {
  //GO TO MENU ITEM PAGE
};

return (
<Row justify='center'>
  <Col xl={24} lg={24} md={24} sm={24} xs={24}>
    <Header className='header-fixed'>
      <Row>
        <Col xl={12} lg={12} md={12} sm={20} xs={20}>
          <Title id='title-button' level={4}>
            <a onClick={() => gotoPage('')}>My App</a>
          </Title>
        </Col>
        <Col xl={12} lg={12} md={12} sm={4} xs={4}>
          <Menu
            theme='dark'
            mode='horizontal'
            defaultSelectedKeys={["item1"]}
            overflowedIndicator={<MenuOutlined />}
          >
            <Menu.Item
              key="item1"
              onClick={() => gotoPage("item1")}
            >
              item1
            </Menu.Item>
            <Menu.Item
              key={"item2"}
              onClick={() => gotoPage("item2")}
            >
              item2
            </Menu.Item>
            <Menu.Item
              key={"item3"}
              onClick={() => gotoPage("item3")}
            >
              item3
            </Menu.Item>
          </Menu>
        </Col>
      </Row>
    </Header>
    <Content>{props.children}</Content>
  </Col>
</Row>
);
};

CSS：

.header-fixed {
  h4 {
      margin-top: 15px;
      margin-bottom: 20px;
  }
}

然后使用组件如下：

<NavBar selectedPage=''>
  <YourPageComponent />
</NavBar>

Answer 4

首先澄清一下：antd文档的含义是“响应式”（在文档中的this example中）不导航条项目重排，而是侧边栏折叠成较小的菜单或在汉堡包触发按钮出现时消失。

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

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

Ant设计响应NavBar问题

4 个答案: