前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于antd实现一个左侧导航菜单

基于antd实现一个左侧导航菜单

作者头像
王小婷
发布2019-11-27 22:46:58
3.9K0
发布2019-11-27 22:46:58
举报
文章被收录于专栏:编程微刊

学习react,首选UI框架,想要实现什么样的效果,都可以去找一下,无需自己写太多的代码,开箱即用,瞬间感觉自己是一个没得感情的复制黏贴程序员,api工程师...

但是为了能够在项目中发挥更好的作用,平时没事的时候还是多熟悉熟悉各种文档吧,毕竟熟能生巧这句千古名词也不是随意说说的,每一次温故的时候总会发现令我眼前一亮的东西....

话不多说,继续记录....

1:首先生成一个空组件模板

代码语言:javascript
复制
import React, { Component } from 'react';
class Nav extends Component {
    constructor(props) {
        super(props);
        //react定义数据
        this.state = {
        }
    }
    render() {
        return (
            <div>
                <h2>我是导航菜单界面</h2>                           
            </div>
        )
    }
}
export default  Nav;

2:在空组件里面引入导航菜单相关要用到的组件

代码语言:javascript
复制
import { Menu, Icon } from 'antd';
const { SubMenu } = Menu;

3:参考antd文档:关于Menu导航菜单的相关组件,重要的话说三遍... https://ant.design/components/menu-cn/

4: render()内容 从文档里面找到相关内容,ctrl c + ctrl v

5:参考代码如下

代码语言:javascript
复制
import React, { Component } from 'react';
import { Menu, Icon } from 'antd';
const { SubMenu } = Menu;
class Nav extends Component {
    constructor(props) {
        super(props);
        //react定义数据
        this.state = {
            
        }
    }
    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>
                  <Icon type="mail" />
                  <span>数据管理</span>
                </span>
              }
            >
              <Menu.Item key="3">用户管理</Menu.Item>
              <Menu.Item key="4">角色管理</Menu.Item>
            </SubMenu>
            <SubMenu
              key="sub2"
              title={
                <span>
                  <Icon type="appstore" />
                  <span>配置管理</span>
                </span>
              }
            >
              <Menu.Item key="5">参数配置</Menu.Item>
              <Menu.Item key="6">地图配置</Menu.Item>
              
            </SubMenu>
            <SubMenu
              key="sub4"
              title={
                <span>
                  <Icon type="setting" />
                  <span>签到管理</span>
                </span>
              }
            >
              <Menu.Item key="9">签到查询</Menu.Item>
              <Menu.Item key="10">签到统计</Menu.Item>
             
            </SubMenu>
          </Menu>
        );
      }
}
export default  Nav;

实现效果,一个导航栏就出现啦,现在要把这个用在项目里面啦,选择自己喜欢的样式,添加上去,就搞定啦。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档