element导航菜单的处理 Element-React NavMenu 导航菜单

Element导航菜单是一种常用的用户界面元素，它可以帮助用户快速找到所需的内容。在使用Element导航菜单时，有几个重要的步骤需要考虑：

首先，在使用Element导航菜单时，应该根据应用程序的特性来确定导航菜单的结构和内容。例如，如果应用程序有多个不同的功能模块，则可以将这些模块作为一个大分类来显示在Element导航菜单中。此外，还可以根据不同功能模块之间的相互关系来创建子分类，从而使得用户可以快速找到所需内容。

其次，在使用Element导航菜单时，也要考虑如何将其外观和交互方式进行优化。例如：可以使用不同颜色、字体大小、图标、文字说明来区分不同功能模块之间的差异性;也可以通过高亮显示当前所在位置、显示子分类信息、显示快速连接信息来帮助用户快速理解当前位置并找到相应内容;此外，也可以通过将Element导舊标准化并添加相应的交互效果来优化整体界面风格。

最后，在使用Element导航菜单时也要考虑将其整合到其他UI元素中去。例如: 将 Element 对话标准化并添加相应的交互效果;将 Element 对话标准化并添加相应的回退/前进/重新加载/重新尝试/重新尝试/重新尝试/重新尝试/重新尝试/重新尝试/释放等功能;将 Element 对话标准化并添加相应的快速测评、帮助信息、版本信息、泵浦信息等;将 Element 对话标准化并添加相应的回复信息、异常信息等;最后, 还要测评 Element 对话标准化之后, 是否会限制或影响原有 UI 的性能, 从而避免出问题.

Element-React NavMenu 导航菜单

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

顶栏

适用广泛的基础用法。

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	—	—

文章详情

element导航菜单的处理 Element-React NavMenu 导航菜单