Element-React NavMenu 导航菜单

2020-10-17 12:00 更新

为网站提供导航功能的菜单。

顶栏

适用广泛的基础用法。

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="我的工作台">
          <Menu.Item index="2-1">选项1</Menu.Item>
          <Menu.Item index="2-2">选项2</Menu.Item>
          <Menu.Item index="2-3">选项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="我的工作台">
          <Menu.Item index="2-1">选项1</Menu.Item>
          <Menu.Item index="2-2">选项2</Menu.Item>
          <Menu.Item index="2-3">选项3</Menu.Item>
        </Menu.SubMenu>
        <Menu.Item index="3">订单管理</Menu.Item>
      </Menu>
    </div>
  )
}


onSelect() {


}

侧栏

垂直菜单,可内嵌子菜单。

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>导航一</span>}>
            <Menu.ItemGroup title="分组一">
              <Menu.Item index="1-1">选项1</Menu.Item>
              <Menu.Item index="1-2">选项2</Menu.Item>
            </Menu.ItemGroup>
            <Menu.ItemGroup title="分组2">
              <Menu.Item index="1-3">选项3</Menu.Item>
            </Menu.ItemGroup>
          </Menu.SubMenu>
          <Menu.Item index="2"><i className="el-icon-menu"></i>导航二</Menu.Item>
          <Menu.Item index="3"><i className="el-icon-setting"></i>导航三</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="导航一">
          <Menu.ItemGroup title="分组一">
            <Menu.Item index="1-1">选项1</Menu.Item>
            <Menu.Item index="1-2">选项2</Menu.Item>
          </Menu.ItemGroup>
          <Menu.ItemGroup title="分组2">
            <Menu.Item index="1-3">选项3</Menu.Item>
          </Menu.ItemGroup>
        </Menu.SubMenu>
        <Menu.Item index="2">导航二</Menu.Item>
        <Menu.Item index="3">导航三</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>导航一</Menu.Item>
          <Menu.Item index="2"><i className="el-icon-message"></i>导航二</Menu.Item>
        </Menu.ItemGroup>
        <Menu.ItemGroup title="分组二">
          <Menu.Item index="3"><i className="el-icon-message"></i>导航三</Menu.Item>
          <Menu.Item index="4"><i className="el-icon-message"></i>导航四</Menu.Item>
        </Menu.ItemGroup>
      </Menu>
      </Layout.Col>
    </Layout.Row>
  )
}


onOpen() {


}


onClose() {


}

Menu Attribute

参数 说明 类型 可选值 默认值
mode 模式 string horizontal,vertical vertical
theme 主题色 string light,dark light
defaultActive 当前激活菜单的 index string
defaultOpeneds 当前打开的submenu的 key 数组 Array
uniqueOpened 是否只保持一个子菜单的展开 boolean false
menuTrigger 子菜单打开的触发方式(只在 mode 为 horizontal 时有效) string hover

Menu Events

事件名称 说明 回调参数
onSelect 菜单激活回调 index: 选中菜单项的 indexPath: 选中菜单项的 index path
onOpen SubMenu 展开的回调 index: 打开的 subMenu 的 index, indexPath: 打开的 subMenu 的 index path
onClose SubMenu 收起的回调 index: 收起的 subMenu 的 index, indexPath: 收起的 subMenu 的 index path

SubMenu Attribute

参数 说明 类型 可选值 默认值
index 唯一标志 string

MenuItem Attribute

参数 说明 类型 可选值 默认值
index 唯一标志 string

MenuGroup Attribute

参数 说明 类型 可选值 默认值
title 分组标题 string
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号