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导航菜单
喜欢(0)