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)[] | 子菜单的菜单项 | |