shangyunsi / uxcore-menu

Menu Component based on React

---

uxcore-menu

TL;DR

uxcore-menu ui component for react

setup develop environment

$ git clone https://github.com/uxcore/uxcore-menu
$ cd uxcore-menu
$ npm install
$ gulp server

Usage

import ReactDOM from 'react-dom';
import RcMenu, {SubMenu, Item, Divider} from 'rc-menu';

ReactDOM.render(
	<Menu >
		<Item key="mail">
			<i className="kuma-icon kuma-icon-email"></i>导航一
		</Item>
		<Item key="app">
			<i className="kuma-icon kuma-icon-wangwang"></i>导航二
		</Item>
		<SubMenu title={<span><i className="kuma-icon kuma-icon-setting"></i>导航 - 子菜单</span>}>
			<Item key="setting:1">选项1</Item>
			<Item key="setting:2">选项2</Item>
			<Item key="setting:3">选项3</Item>
			<Item key="setting:4">选项4</Item>
		</SubMenu>
		<Item key="alipay">
			<a href="#" target="_blank">导航四 - 链接</a>
		</Item>
	</Menu>,
	target);

demo

http://uxcore.github.io/uxcore/components/menu/

API

Props

Menu

配置项	说明	类型	默认值
mode	菜单类型	enum 'vertical', 'horizontal', 'inline'	vertical
selectedKeys	当前选中的菜单项 key 数组
defaultSelectedKeys	初始选中的菜单项 key 数组
openKeys	当前展开的菜单项 key 数组
defaultOpenKeys	初始展开的菜单项 key 数组
onSelect	被选中时调用，参数 {item, key, selectedKeys} 对象	function	无
onDeselect	取消选中时调用，参数 {item, key, selectedKeys} 对象，仅在 multiple 生效	function	无
onOpenChange	菜单打开或关闭时调用，参数 openKeys 数组	function	无
onOpen	同 onOpenChange，为了兼容旧版本保留的方法，将来会移除。参数 {openKeys} 对象	function	无
onClose	同 onOpenChange，为了兼容旧版本保留的方法，将来会移除。参数 {openKeys} 对象	function	无
onClick	点击 menuitem 调用此函数，参数为 {item, key}	function	无
style	根节点样式	object
lineClamp	文字行数，超出则显示省略号（仅在 inline 模式下且支持 line-clamp 属性的浏览器上生效）	number	1

Item

配置项	说明	类型	默认值
disabled	是否禁用	Boolean	false
key	item 的唯一标志	String

SubMenu

配置项	说明	类型	默认值
title	子菜单项值	String or React.Element
children	(MenuItem or SubMenu)[]	子菜单的菜单项