ant desgin 导航

客官°小女子只卖身不卖艺 2021-09-18 17:38 212阅读 0赞

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;