侧边导航

导航菜单是一个网站的灵魂,用户依赖导航在各个页面中进行跳转。

什么是导航

导航菜单是一个网站的灵魂,用户依赖导航在各个页面中进行跳转。

一般分为顶部导航和侧边导航,顶部导航提供全局性的类目和功能,侧边导航提供多级结构来收纳和排列网站架构。

如何实现侧边导航

首先,我们看一下最常见的导航构成。你会发现导航也是由多个组件,如 Sider 侧边栏组件,Logo 网站标志组件,SubMenu 子菜单,MenuItem 菜单选项等组合而成。

侧边导航

我们在上一节代码的基础上修改,在 Sider 组件中添加 Menu 菜单项,一个普通的导航菜单完整代码如下:

// 注意这里我们除了从antd中引入了Layout布局组件,还引入了Menu菜单组件,Icon图标组件

import { Component } from 'react';
import { Layout, Menu, Icon } from 'antd';


const { Header, Footer, Sider, Content } = Layout;

// 引入子菜单组件
const SubMenu = Menu.SubMenu; 

export default class BasicLayout extends Component {
  render() {
    return (
      <Layout>
        <Sider width={256} style={{ minHeight: '100vh' }}>
          <div style={{ height: '32px', background: 'rgba(255,255,255,.2)', margin: '16px'}}/>
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
              <Icon type="pie-chart" />
              <span>Helloworld</span>
            </Menu.Item>
            <SubMenu
              key="sub1"
              title={<span><Icon type="dashboard" /><span>Dashboard</span></span>}
            >
               <Menu.Item key="2">分析页</Menu.Item>
               <Menu.Item key="3">监控页</Menu.Item>
               <Menu.Item key="4">工作台</Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout >
          <Header style={{ background: '#fff', textAlign: 'center', padding: 0 }}>Header</Header>
          <Content style={{ margin: '24px 16px 0' }}>
            <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
              {this.props.children}
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    )
  }
}

上面代码中,MenuSider 的子组件,SubMenuMenu 的子组件,Menu.Item 是最小的导航选项。

上面的代码运行得到的效果如下:

侧边导航

恭喜,至此我们就实现了导航的侧边栏展现。

下一节,我们将配置路由,使得点击对应的导航选项的时候,页面展示对应信息。

相关文章

感觉本篇文章不错,对你有收获?

¥我要小额赞助,鼓励作者写出更好的教程
80 160 120

作者:

  • 出处: https://www.mi360.cn/articles/163
  • 本文版权归作者,欢迎转载,但未经作者同意必须保留 此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

评论区

最新评论

扫码关注