Ant 设计响应式 NavBar

Question

我正在使用 AntD，认为它可以轻松快速地设置通用和标准的响应式导航栏，但事实证明它在默认情况下没有响应：

如您所见，它被压扁了。

代码如下：

<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
                        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.Items 大小时有一个顶部导航栏可以折叠并变成汉堡包图标。另外，我需要 2 menu.items 在右侧。

Answer 1

首先澄清一下：antd 文档中 "responsive"（在文档中的 this example 中）的意思是不是导航栏项目回流，但是而不是 sidebar 折叠成一个较小的菜单，或者随着汉堡触发按钮的出现而消失。

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

AntD 不支持您在澄清中解释的要求。我的一个基于 AntD 的站点的工作方式与您正在寻找的类似。我在该站点上所做的是呈现两组菜单，一组用于桌面导航栏，一组用于带有汉堡包的小屏幕侧边栏，然后使用 CSS 媒体查询在 @screen-sm 断点.

Answer 2

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

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

我附上了视口足够窄以仅呈现汉堡包图标时的外观截图。

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

希望对您有所帮助。

Answer 3

我在考虑这个问题后决定为一个项目选择 Ant 设计。响应式导航栏是常见的场景，但我想知道为什么 Ant Design 中没有这样的东西？然后我在 repo 中搜索问题，发现 Ant Design Mobile 作为对问题的评论。

他们有一个单独的移动设备包。在 Ant Design Mobile 中，有单独的 web components. In that section you can find a Menu 组件部分，适用于移动设备汉堡包图标。

希望这对以后的读者有所帮助。

Answer 4

对于响应行为，使用 antd 的菜单组件中的“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>

Ant 设计响应式 NavBar

Ant design responsive NavBar

reactjs

antd

更新