ant desgin 导航

import styles from './index.css';
import { Layout } from 'antd';
import { Menu } from 'antd';

const {
  Header, Footer, Content,
} = Layout;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;


function BasicLayout(props) {
  return (
    <div className={styles.normal}>
    <Layout>
      <Header className={styles.munebox}>
      <Menu className={styles.mune} mode="horizontal">
       
      <SubMenu  title={<span className="submenu-title-wrapper">首页</span>}>
          <MenuItemGroup title="Item 1">
            {/* <Menu.Item key="setting:1">Option 1</Menu.Item>
            <Menu.Item key="setting:2">Option 2</Menu.Item> */}
          </MenuItemGroup>
          <MenuItemGroup title="Item 2">
            {/* <Menu.Item key="setting:3">Option 3</Menu.Item>
            <Menu.Item key="setting:4">Option 4</Menu.Item> */}
          </MenuItemGroup>
        </SubMenu>

        <SubMenu className={styles.muneitem} title={<span className="submenu-title-wrapper">性能</span>}>
          <MenuItemGroup title="Item 1">
            {/* <Menu.Item key="setting:1">Option 1</Menu.Item>
            <Menu.Item key="setting:2">Option 2</Menu.Item> */}
          </MenuItemGroup>
          <MenuItemGroup title="Item 2">
            {/* <Menu.Item key="setting:3">Option 3</Menu.Item>
            <Menu.Item key="setting:4">Option 4</Menu.Item> */}
          </MenuItemGroup>
        </SubMenu>
        <SubMenu className={styles.muneitem} title={<span className="submenu-title-wrapper">实例</span>}>
          <MenuItemGroup title="Item 1">
            {/* <Menu.Item key="setting:1">Option 1</Menu.Item> 
            <Menu.Item key="setting:2">Option 2</Menu.Item> */}
          </MenuItemGroup>
          <MenuItemGroup title="Item 2">
            {/* <Menu.Item key="setting:3">Option 3</Menu.Item>
            <Menu.Item key="setting:4">Option 4</Menu.Item> */}
          </MenuItemGroup>
        </SubMenu>
       
      </Menu>
      </Header>
      <Content>Content</Content>
      <Footer>Footer</Footer>
    </Layout>
    </div>
  );
}

export default BasicLayout;

猜你喜欢

转载自blog.csdn.net/Neil_1993/article/details/89011511
ANT