ReactJS UI Ant Design Navigation 组件完整参考

Ant Design 是一个非常流行的 React UI 组件库，提供了丰富的 UI 元素和交互组件，如导航、表格、表单、按钮等等。本文将介绍 Ant Design Navigation 组件的使用方法和属性。

Ant Design Navigation 组件

Ant Design Navigation 组件是一组与导航相关的 UI 元素和交互组件，包括导航菜单、面包屑、标签页和分页器。

导航菜单

导航菜单是常见的网站和应用程序的主要导航方式。Ant Design 提供了多种导航菜单的样式和布局。

基本用法

import { Menu } from 'antd';

const { SubMenu } = Menu;

function App() {
  return (
    <Menu mode="horizontal">
      <Menu.Item key="mail">
        邮箱
      </Menu.Item>
      <Menu.Item key="app">
        应用
      </Menu.Item>
      <SubMenu key="sub1" title="设置">
        <Menu.Item key="setting:1">选项1</Menu.Item>
        <Menu.Item key="setting:2">选项2</Menu.Item>
        <Menu.Item key="setting:3">选项3</Menu.Item>
        <Menu.Item key="setting:4">选项4</Menu.Item>
      </SubMenu>
    </Menu>
  );
}

基本用法通过 Menu 组件来实现，使用 Menu.Item 来定义菜单项和子菜单，

使用 SubMenu 定义一个带子菜单的菜单项。

垂直菜单

import { Menu, Button } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;

class App extends React.Component {
  state = {
    current: 'mail',
  };

  handleClick = e => {
    console.log('click ', e);
    this.setState({ current: e.key });
  };

  render() {
    const { current } = this.state;
    return (
      <>
        <Button type="primary" onClick={this.handleClick}>
          Click me
        </Button>
        <Menu onClick={this.handleClick} selectedKeys={[current]} mode="vertical">
          <Menu.Item key="mail" icon={<MailOutlined />}>
            邮箱
          </Menu.Item>
          <Menu.Item key="app" icon={<AppstoreOutlined />}>
            应用
          </Menu.Item>
          <SubMenu key="sub1" icon={<SettingOutlined />} title="设置">
            <Menu.Item key="setting:1">选项1</Menu.Item>
            <Menu.Item key="setting:2">选项2</Menu.Item>
            <Menu.Item key="setting:3">选项3</Menu.Item>
            <Menu.Item key="setting:4">选项4</Menu.Item>
          </SubMenu>
        </Menu>
      </>
    );
  }
}

通过设置 mode="vertical" 来实现垂直菜单的效果。由于移动端页面大多都是垂直布局，

所以垂直菜单在移动端非常常见，可以方便用户的查看和操作。

内嵌菜单

import { Menu } from 'antd';

const { SubMenu } = Menu;

class App extends React.Component {
  handleClick = e => {
    console.log('click ', e);
  };

  render() {
    return (
      <Menu
        onClick={this.handleClick}
        style={{ width: 256 }}
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
      >
        <SubMenu
          key="sub1"
          title={
            <span>
              <span>导航1</span>
            </span>
          }
        >
          <Menu.Item key="1">选项1</Menu.Item>
          <Menu.Item key="2">选项2</Menu.Item>
          <Menu.Item key="3">选项3</Menu.Item>
        </SubMenu>
        <SubMenu
          key="sub2"
          title={
            <span>
              <span>导航2</span>
            </span>
          }
        >
          <Menu.Item key="4">选项4</Menu.Item>
          <Menu.Item key="5">选项5</Menu.Item>
          <Menu.Item key="6">选项6</Menu.Item>
          <SubMenu key="sub3" title="子菜单">
            <Menu.Item key="7">选项7</Menu.Item>
            <Menu.Item key="8">选项8</Menu.Item>
          </SubMenu>
        </SubMenu>
      </Menu>
    );
  }
}

内嵌菜单可以更好地利用网页空间，把菜单选项放到侧边栏等位置，用户可以更快地找到和操作所需目标。

面包屑

面包屑是一种常见的导航方式，能够清晰地显示用户当前所在的位置以及所经历的路径。Ant Design 提供了方便易用的面包屑组件。

基本用法

import { Breadcrumb } from 'antd';

function App() {
  return (
    <Breadcrumb>
      <Breadcrumb.Item>首页</Breadcrumb.Item>
      <Breadcrumb.Item>应用列表</Breadcrumb.Item>
      <Breadcrumb.Item>应用详情</Breadcrumb.Item>
    </Breadcrumb>
  );
}

基本用法通过 Breadcrumb 组件来实现，使用 Breadcrumb.Item 来定义面包屑的每个组成部分。

路由面包屑

import { Breadcrumb } from 'antd';
import { Link } from 'react-router-dom';

function Bread() {
  return (
    <Breadcrumb style={{ margin: '16px 0' }}>
      <Breadcrumb.Item>
        <Link to="/">首页</Link>
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        <Link to="/app">应用列表</Link>
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        <Link to="/app/detail">应用详情</Link>
      </Breadcrumb.Item>
    </Breadcrumb>
  );
}

如果你使用了 React-Router 类库，那么可以使用 Link 来代替标准的面包屑链接。Link 允许你为每个面包屑设置点击链接的路由地址，方便用户快速跳转到所需位置。

标签页

标签页是一种常见的导航方式，允许用户在一个页面中快速切换不同的视图或内容块。Ant Design 提供了可定制的标签页组件。

基本用法

import { Tabs } from 'antd';

const { TabPane } = Tabs;

function callback(key) {
  console.log(key);
}

function App() {
  return (
    <Tabs defaultActiveKey="1" onChange={callback}>
      <TabPane tab="Tab 1" key="1">
        Content of Tab Pane 1
      </TabPane>
      <TabPane tab="Tab 2" key="2">
        Content of Tab Pane 2
      </TabPane>
      <TabPane tab="Tab 3" key="3">
        Content of Tab Pane 3
      </TabPane>
    </Tabs>
  );
}

标签页组件通过 Tabs 和 TabPane 组件来实现，Tabs 组件提供整个标签页的容器，TabPane 组件定义每个标签面板的内容。

可关闭标签页

import { Tabs } from 'antd';

const { TabPane } = Tabs;

function callback(key) {
  console.log(key);
}

function onEdit(targetKey, action) {
  console.log(targetKey, action);
}

function App() {
  return (
    <Tabs
      type="editable-card"
      onChange={callback}
      onEdit={onEdit}
      activeKey={this.state.activeKey}
    >
      <TabPane tab="Tab 1" key="1" closable={false}>
        Content of Tab Pane 1
      </TabPane>
      <TabPane tab="Tab 2" key="2" closable={false}>
        Content of Tab Pane 2
      </TabPane>
      <TabPane tab="Tab 3" key="3" closable={false}>
        Content of Tab Pane 3
      </TabPane>
    </Tabs>
  );
}

当一个应用程序包含多个标签页时，用户可以通过关闭标签页来节省屏幕空间。通过在 Tabs 组件上添加 type="editable-card" 属性，即可启用可关闭标签页的功能。

分页器

分页器是适用于大量数据展示的需要，它可以使得数据分页更加方便。Ant Design 提供了可定制的分页器组件。

基本用法

import { Pagination } from 'antd';

function onChange(pageNumber) {
  console.log('Page: ', pageNumber);
}

function App() {
  return (
    <Pagination defaultCurrent={1} total={50} onChange={onChange} />
  );
}

基本用法通过 Pagination 组件来实现，使用 total 属性指定总数据量和 onChange 回调函数来处理分页事件。

迷你分页器

import { Pagination } from 'antd';

function onChange(pageNumber) {
  console.log('Page: ', pageNumber);
}

function App() {
  return (
    <Pagination size="small" total={50} onChange={onChange} />
  );
}

在占用空间较小的地方，可以使用迷你模式的分页器，只需要设置 size="small" 即可。

总结

本文介绍了 Ant Design Navigation 组件的基本用法和属性，包括导航菜单、面包屑、标签页和分页器。在实际开发中，Ant Design Navigation 组件可帮助我们快速构建出漂亮的网站和应用程序，提高用户的交互体验。