Package Exports
- rc-menu
- rc-menu/assets/index.css
- rc-menu/lib/MenuItem
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rc-menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
rc-menu
react menu component. port from https://github.com/kissyteam/menu
Screenshot
Usage
import Menu, {SubMenu, MenuItem} = require('rc-menu');
ReactDOM.render(<Menu>
<MenuItem>1</MenuItem>
<SubMenu title="2">
<MenuItem>2-1</MenuItem>
</SubMenu>
</Menu>, container);
install
API
Menu props
name | type | default | description |
---|---|---|---|
className | String | additional css class of root dom node | |
mode | String | vertical | one of ["vertical","horizontal","inline"] |
activeKey | Object | initial and current active menu item's key. | |
defaultActiveFirst | Boolean | false | whether active first menu item when show if activeKey is not set or invalid |
multiple | Boolean | false | whether allow multiple select |
selectedKeys | String[] | [] | selected keys of items |
defaultSelectedKeys | String[] | [] | initial selected keys of items |
openKeys | String[] | [] | open keys of SubMenuItem |
defaultOpenKeys | String[] | [] | initial open keys of SubMenuItem |
onSelect | function({key:String, item:ReactComponent, domEvent:Event, selectedKeys:String[]}) | called when select a menu item | |
onClick | function({key:String, item:ReactComponent, domEvent:Event, keyPath: String[]}) | called when click a menu item | |
onOpen | function({openKeys:String[]}) | called when open a sub menu | |
onClose | function({openKeys:String[]}) | called when close a sub menu | |
onDeselect | function({key:String, item:ReactComponent, domEvent:Event, selectedKeys:String[]}) | called when deselect a menu item. only called when allow multiple | |
openSubMenuOnMouseEnter | bool | true | whether enable top items to open on mouse enter |
closeSubMenuOnMouseEnter | bool | true | whether enable close submenu on mouse leave |
openAnimation | {enter:function,leave:function}|String | animate when sub menu open or close. see rc-animate for object type. | |
openTransition | String | css transitionName when sub menu open or close |
Menu.Item props
name | type | default | description |
---|---|---|---|
className | String | additional css class of root dom node | |
disabled | Boolean | false | no effect for click or keydown for this item |
key | Object | corresponding to activeKey |
Menu.SubMenu props
name | type | default | description |
---|---|---|---|
className | String | additional css class of root dom node | |
title | String/ReactElement | sub menu's content | |
key | Object | corresponding to activeKey | |
disabled | Boolean | false | no effect for click or keydown for this item |
Menu.Divider props
none
Menu.ItemGroup props
name | type | default | description |
---|---|---|---|
title | String|React.Element | title of item group | |
children | React.Element[] | MenuItems belonged to this group |
Development
npm install
npm start
Example
http://localhost:8001/examples/index.md
online example: http://react-component.github.io/menu/examples/
Test Case
http://localhost:8010/tests/runner.html?coverage
Coverage
License
rc-menu is released under the MIT license.