logo标签列表

Ant Design 响应式导航栏

reactjsantd
24
我正在使用AntD，认为它可以轻松快速地设置一个通用和标准的响应式导航栏，但实际上默认情况下它不是响应式的： squashed 如您所见，它被挤压了。
以下是代码：
<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>

所以我再次阅读了文档，并认为我需要在菜单内部使用网格来使其响应。 然而，它却给我报错:

errors

这里是代码:

<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>

更新

让我澄清一下。我不想要一个侧边栏（因为我的网站很小，页面不多）。我只想要在重新调整菜单大小时拥有一个顶部导航栏。菜单项可以折叠并变成汉堡图标。另外，我需要右侧有两个菜单项。

4个回答
24
我在考虑为一个项目选择Ant Design时，看到了这个问题。响应式导航栏是常见的场景，但我想知道为什么Ant Design中没有这样的东西？ 然后我在GitHub上搜索问题，并在其中的评论中发现了Ant Design Mobile。
他们为移动设备提供了单独的套餐。在Ant Design Mobile中，有一个专门的Web组件部分。在该部分中，您可以找到适用于移动设备汉堡图标的菜单组件。 希望这对未来的读者有所帮助。
11

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

该组件接受 Ant 菜单标记作为属性，并根据视口宽度有条件地呈现菜单，要么保持原样（用于桌面端），要么在 Popover 组件中包装传递的菜单标记（用于移动端）。

我包含了一些截图，展示窄视口下呈现汉堡图标的效果。

默认 Ant 菜单 响应式 Ant 菜单

你可以在此处找到带有工作示例的 Github 仓库。

希望对你有所帮助。

谢谢Tomas，感谢你在这里所做的出色工作。只有一个问题，如果我们即使为了这样一个简单的目的而编写自己的代码，而等效的UI框架例如Bootstrap已经实现了它，那么我们为什么还要使用Ant Design？当我发现AntDesign的NavBar甚至不是响应式时，这就是对Ant Design的感觉。 - Franva
5
你说得对，Franva。虽然 Ant Design 中确实还没有这个特定的功能，但其他 UI 框架中仍然缺少太多出色的功能。我认为这总是需要做出妥协的，适合你的项目未必适合其他项目。举个例子，让我们比较一下 Ant Design 和 React Bootstrap 中的表格组件 - Ant Design 的表格组件拥有比 Bootstrap 更多的功能和选项。我相信，我提出的解决方案只是暂时的，迟早响应式菜单会成为 Ant Design 的一部分 :) - Tom
同意 :) 希望不要太久。 - Franva
4
首先澄清一下：antd文档中的“响应式”（在文档的这个例子中）并不意味着导航栏项目会重新排列，而是指侧边栏会折叠成一个更小的菜单，或者消失，并出现一个汉堡包触发按钮。
其次：混合使用Menu和Row/Col不是一个好主意。错误发生是因为Menu.Item期望成为Menu的直接子元素，而您将它作为通过Row/Col嵌套的孙子元素，而Row/Col未传递相同的props。
在AntD中没有支持您在澄清中所解释的要求。我的一个基于AntD的网站以类似于您寻找的方式工作。在该网站上，我渲染了两组菜单，一组用于桌面导航栏，一组用于小屏幕侧边栏与汉堡包，然后使用CSS媒体查询在@screen-sm断点的每一侧隐藏其中之一。
2
嗨Jasper，感谢您的回复。让我澄清一下自己的意思。我不想要一个侧边栏（因为我的情况是一个小网站，没有很多页面）。我想要的只是在重新调整菜单时有一个顶部导航栏。菜单项可以折叠并变成汉堡图标。此外，我需要右侧有2个菜单项。 - Franva
我们有一个属性可以使菜单项折叠并变成汉堡图标吗？ - Franva
@JesperWe 感谢您的回复。您使用React吗？您能否分享一下您在答案中描述的实现方式？ - SaidAkh
4

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

请查看下面的示例，获得一个简单的响应式NavBar：

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>
看起来很有前途。 - igauravsehrawat
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接