React EasyUI 菜单

2020-06-24 12:09 更新

菜单( Menu )通常用于上下文菜单。 菜单( Menu )是创建其他菜单组件的基础组件。 菜单( Menu )也能用于导航和执行命令。

属性列表

名称 数据类型 作用描述 默认值
menuCls string 菜单样式类。 null
menuStyle Object 菜单内联样式。 null
menuWidth number, string 菜单宽度。 null
inline boolean 为True时,保留在其父元素中,false时位于所有元素之上。 false
noline boolean 是否在菜单上显示垂直线。 false
duration number 以毫秒为单位定义持续时间,在鼠标离开菜单时隐藏。 100

事件列表

名称 参数 作用描述
onItemClick value 单击菜单项时触发。
onShow none 菜单显示时触发。
onHide none 菜单隐藏时触发。

方法列表

名称 参数 返回值 作用描述
hide none void 隐藏菜单组件。
show left, top void 显示菜单组件。
showContextMenu left, top void 将菜单组件显示为contextmenu。
showAt target,  align void 显示菜单组件并对齐到指定的元素。“align”参数值可以是 'left', 'right'。

注:
- 继承: LocaleBase 。

使用方法

<Menu inline onItemClick={this.handleItemClick.bind(this)}>
  <MenuItem value="new" text="New"></MenuItem>
  <MenuItem text="Open">
    <SubMenu>
      <MenuItem value="word" text="Word"></MenuItem>
      <MenuItem value="excel" text="Excel"></MenuItem>
      <MenuItem value="ppt" text="PowerPoint"></MenuItem>
    </SubMenu>
  </MenuItem>
  <MenuItem value="save" text="Save" iconCls="icon-save"></MenuItem>
  <MenuItem value="print" text="Print" iconCls="icon-print" disabled></MenuItem>
  <MenuSep></MenuSep>
  <MenuItem value="exit" text="Exit"></MenuItem>
</Menu>

子菜单( SubMenu )

  • 属性列表
名称 数据类型 作用描述 默认值
menuCls string 菜单样式类。 null
menuStyle Object 菜单内联样式。 null
menuWidth any 菜单宽度。 null

注:
- 继承: LocaleBase 。

菜单项( MenuItem )

  • 属性列表
名称 数据类型 作用描述 默认值
value any 绑定到菜单项的值。 null
text string 菜单项文本。 null
disabled boolean 是否禁用菜单项。 false
iconCls string 用于在菜单项上显示16x16图标的CSS类。 null

注:
- 继承: LocaleBase 。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号