Ant Design导航菜单
今天有时间来学习Ant Design的导航菜单！
看下效果图：
首先新建一个页面，如果不会用，去看上一篇文章就可以了！
test.js页面代码（可以直接复制替换你的！ 注意吧Test改成你文件的名字哦！）：
//必须引入这个css不然你用到的组件都不会有样式哦！
//可以以后放在布局文件中以后就不用每个页面都引入
import 'antd/dist/antd.css'
//暂时用不到
//import styles from './test.css';
import { Menu, Icon } from 'antd';
import React, { PureComponent } from 'react';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
class Test extends PureComponent {
//下拉菜单标记初始化 默认一个
state = {
current: 'index',
}
//记录当前选择的导航菜单的标记
handleClick = (e) => {
console.log('click ', e);
this.setState({
current: e.key,
});
}
render() {
return (
<Menu
onClick={this.handleClick}
selectedKeys={[this.state.current]}
mode="horizontal"
>
<Menu.Item key="index">
<a href="https://www.liangjucai.com" target="_blank" rel="noopener noreferrer">博客</a>
</Menu.Item>
<Menu.Item key="test">
<Icon type="mail" />测试
</Menu.Item>
<Menu.Item key="app" disabled>
<Icon type="appstore" />论坛
</Menu.Item>
<SubMenu title={<span className="submenu-title-wrapper"><Icon type="setting" />下拉多级菜单</span>}>
<MenuItemGroup title="测试1">
<Menu.Item key="setting:1"><Icon type="appstore" />论坛</Menu.Item>
<Menu.Item key="setting:1"><Icon type="appstore" />博客</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="测试2">
<Menu.Item key="setting:1">
<a href="https://www.liangjucai.com" target="_blank" rel="noopener noreferrer">博客</a>
</Menu.Item>
</MenuItemGroup>
</SubMenu>
<SubMenu key="sub1" title={<span><Icon type="code" /><span>下拉菜单</span></span>}>
<Menu.Item key="5"><Icon type="appstore" />测试ICON</Menu.Item>
<Menu.Item key="8">测试文字</Menu.Item>
</SubMenu>
</Menu>
);
}
}
export default Test;保存刷新，是不是效果就出来了！ 头部css一定要引入哦！ 不然出不来css样式的~ Ant Design导航菜单就搞定了！
好记性不如烂笔头~ 动手试试吧，如果有错误，请给我留言~
Ant Design导航菜单
