React EasyUI 菜单
菜单( 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 。