# uxcore-menu

> uxcore-menu component for uxcore.

Latest version **4.0.7** (published 2019-02-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install uxcore-menu
pnpm add uxcore-menu
yarn add uxcore-menu
bun add uxcore-menu
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.7 |
| Published | 2019-02-22 |
| First published | 2015-10-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 213.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | vincent.bian |
| Maintainers | eternalsky, ex90rts, jianfei, micate, surfacew, taoqili, vincent.bian, xingmolu |
| Keywords | react, react-component, uxcore-menu, Menu |

## Links

- npm: https://www.npmjs.com/package/uxcore-menu
- Repository: https://github.com/uxcore/uxcore-menu
- Homepage: https://github.com/uxcore/uxcore-menu#readme
- Issues: http://github.com/uxcore/uxcore-menu/issues
- npm.io page: https://npm.io/package/uxcore-menu

## Dependencies (5)

- [rc-menu](https://npm.io/package/rc-menu.md) ^7.0.5
- [classnames](https://npm.io/package/classnames.md) ^2.1.2
- [prop-types](https://npm.io/package/prop-types.md) 15.x
- [css-animation](https://npm.io/package/css-animation.md) ^1.3.0
- [object-assign](https://npm.io/package/object-assign.md) ^4.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 4.0.7 (latest) — 2019-02-22
- 4.0.6 — 2019-02-21
- 4.0.5 — 2019-01-26
- 4.0.4 — 2018-09-21
- 4.0.3 — 2018-09-20
- 4.0.2 — 2018-09-05
- 4.0.1 — 2018-08-01
- 4.0.0 — 2018-07-17
- 3.0.3 — 2018-07-17
- 3.0.2 — 2018-06-19
- 3.0.1 — 2018-01-19
- 3.0.0 — 2018-01-09
- 2.0.4-beta1 — 2018-01-04
- 2.0.3-bate1 — 2018-01-04
- 2.0.2-bate2 — 2018-01-04
- … 19 more at https://npm.io/package/uxcore-menu/versions

## README

---

## uxcore-menu [![Dependency Status](http://img.shields.io/david/uxcore/uxcore-menu.svg?style=flat-square)](https://david-dm.org/uxcore/uxcore-menu) [![devDependency Status](http://img.shields.io/david/dev/uxcore/uxcore-menu.svg?style=flat-square)](https://david-dm.org/uxcore/uxcore-menu#info=devDependencies)

## TL;DR

uxcore-menu ui component for react

#### setup develop environment

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

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

---
_Source: https://npm.io/package/uxcore-menu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._