Ant Design导航菜单

Ant Design导航菜单

今天有时间来学习Ant Design的导航菜单!

看下效果图:

image.png

首先新建一个页面,如果不会用,去看上一篇文章就可以了! 

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)

评论 抢沙发

表情