Element-React NavMenu 導(dǎo)航菜單

為網(wǎng)站提供導(dǎo)航功能的菜單。

頂欄

適用廣泛的基礎(chǔ)用法。

render() {
  return (
    <div>
      <Menu theme="dark" defaultActive="1" className="el-menu-demo" mode="horizontal" onSelect={this.onSelect.bind(this)}>
        <Menu.Item index="1">處理中心</Menu.Item>
        <Menu.SubMenu index="2" title="我的工作臺(tái)">
          <Menu.Item index="2-1">選項(xiàng)1</Menu.Item>
          <Menu.Item index="2-2">選項(xiàng)2</Menu.Item>
          <Menu.Item index="2-3">選項(xiàng)3</Menu.Item>
        </Menu.SubMenu>
        <Menu.Item index="3">訂單管理</Menu.Item>
      </Menu>
      <div className="line"></div>
      <Menu defaultActive="1" className="el-menu-demo" mode="horizontal" onSelect={this.onSelect.bind(this)}>
        <Menu.Item index="1">處理中心</Menu.Item>
        <Menu.SubMenu index="2" title="我的工作臺(tái)">
          <Menu.Item index="2-1">選項(xiàng)1</Menu.Item>
          <Menu.Item index="2-2">選項(xiàng)2</Menu.Item>
          <Menu.Item index="2-3">選項(xiàng)3</Menu.Item>
        </Menu.SubMenu>
        <Menu.Item index="3">訂單管理</Menu.Item>
      </Menu>
    </div>
  )
}


onSelect() {


}

側(cè)欄

垂直菜單，可內(nèi)嵌子菜單。

render() {
  return (
    <Layout.Row className="tac">
      <Layout.Col span={8}>
        <h5>帶 icon</h5>
        <Menu defaultActive="2" className="el-menu-vertical-demo" onOpen={this.onOpen.bind(this)} onClose={this.onClose.bind(this)}>
          <Menu.SubMenu index="1" title={<span><i className="el-icon-message"></i>導(dǎo)航一</span>}>
            <Menu.ItemGroup title="分組一">
              <Menu.Item index="1-1">選項(xiàng)1</Menu.Item>
              <Menu.Item index="1-2">選項(xiàng)2</Menu.Item>
            </Menu.ItemGroup>
            <Menu.ItemGroup title="分組2">
              <Menu.Item index="1-3">選項(xiàng)3</Menu.Item>
            </Menu.ItemGroup>
          </Menu.SubMenu>
          <Menu.Item index="2"><i className="el-icon-menu"></i>導(dǎo)航二</Menu.Item>
          <Menu.Item index="3"><i className="el-icon-setting"></i>導(dǎo)航三</Menu.Item>
        </Menu>
      </Layout.Col>
      <Layout.Col span={8}>
      <h5>不帶 icon</h5>
      <Menu defaultActive="2" className="el-menu-vertical-demo" onOpen={this.onOpen.bind(this)} onClose={this.onClose.bind(this)} theme="dark">
        <Menu.SubMenu index="1" title="導(dǎo)航一">
          <Menu.ItemGroup title="分組一">
            <Menu.Item index="1-1">選項(xiàng)1</Menu.Item>
            <Menu.Item index="1-2">選項(xiàng)2</Menu.Item>
          </Menu.ItemGroup>
          <Menu.ItemGroup title="分組2">
            <Menu.Item index="1-3">選項(xiàng)3</Menu.Item>
          </Menu.ItemGroup>
        </Menu.SubMenu>
        <Menu.Item index="2">導(dǎo)航二</Menu.Item>
        <Menu.Item index="3">導(dǎo)航三</Menu.Item>
      </Menu>
      </Layout.Col>
      <Layout.Col span={8}>
      <h5>分組</h5>
      <Menu mode="vertical" defaultActive="1" className="el-menu-vertical-demo">
        <Menu.ItemGroup title="分組一">
          <Menu.Item index="1"><i className="el-icon-message"></i>導(dǎo)航一</Menu.Item>
          <Menu.Item index="2"><i className="el-icon-message"></i>導(dǎo)航二</Menu.Item>
        </Menu.ItemGroup>
        <Menu.ItemGroup title="分組二">
          <Menu.Item index="3"><i className="el-icon-message"></i>導(dǎo)航三</Menu.Item>
          <Menu.Item index="4"><i className="el-icon-message"></i>導(dǎo)航四</Menu.Item>
        </Menu.ItemGroup>
      </Menu>
      </Layout.Col>
    </Layout.Row>
  )
}


onOpen() {


}


onClose() {


}

Menu Attribute

Menu Events

SubMenu Attribute

MenuItem Attribute

MenuGroup Attribute