react-component
rc-menu
React Menu Component. port from https://github.com/kissyteam/menu
Install
Usage
import Menu, { SubMenu, MenuItem } from 'rc-menu';
ReactDOM.render(
<Menu>
<MenuItem>1</MenuItem>
<SubMenu title="2">
<MenuItem>2-1</MenuItem>
</SubMenu>
</Menu>,
container,
);Compatibility
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
 Electron |
|---|---|---|---|---|
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
API
Menu props
| name | type | default | description |
|---|---|---|---|
| ref | React.HTMLLIElement | get dom node | |
| className | String | additional css class of root dom node | |
| mode | String | vertical | one of ["horizontal","inline","vertical-left","vertical-right"] |
| activeKey | String | 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 |
| selectable | Boolean | true | allow selecting menu items |
| 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 | |
| onOpenChange | (openKeys:String[]) => void | called when open/close sub menu | |
| onDeselect | function({key:String, item:ReactComponent, domEvent:Event, selectedKeys:String[]}) | called when deselect a menu item. only called when allow multiple | |
| triggerSubMenuAction | Enum { hover, click } | hover | which action can trigger submenu open/close |
| openAnimation | {enter:function,leave:function}|String | animate when sub menu open or close. see rc-motion for object type. | |
| openTransition | String | css transitionName when sub menu open or close | |
| subMenuOpenDelay | Number | 0 | delay time to show popup sub menu. unit: s |
| subMenuCloseDelay | Number | 0.1 | delay time to hide popup sub menu. unit: s |
| forceSubMenuRender | Boolean | false | whether to render submenu even if it is not visible |
| getPopupContainer | Function(menuDOMNode): HTMLElement | () => document.body | Where to render the DOM node of popup menu when the mode is horizontal or vertical |
| builtinPlacements | Object of alignConfigs for dom-align | see placements.ts | Describes how the popup menus should be positioned |
| itemIcon | ReactNode | (props: MenuItemProps) => ReactNode | Specify the menu item icon. | |
| expandIcon | ReactNode | (props: SubMenuProps & { isSubMenu: boolean }) => ReactNode | Specify the menu item icon. | |
| direction | String | Layout direction of menu component, it supports RTL direction too. | |
| inlineIndent | Number | 24 | Padding level multiplier. Right or left padding depends on param "direction". |
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 |
| extra | React.ReactNode | Specify menu item extra node. | |
| key | Object | corresponding to activeKey | |
| onMouseEnter | Function({eventKey, domEvent}) | ||
| onMouseLeave | Function({eventKey, domEvent}) | ||
| itemIcon | ReactNode | (props: MenuItemProps) => ReactNode | Specify the menu item icon. |
Menu.SubMenu props
| name | type | default | description |
|---|---|---|---|
| ref | React.HTMLLIElement | get dom node | |
| popupClassName | String | additional css class of root dom node | |
| popupStyle | CSSProperties | additional css style of root dom node | |
| title | String/ReactElement | sub menu's content | |
| overflowedIndicator | String/ReactElement | ··· | overflow indicator when menu overlows in horizontal mode |
| key | Object | corresponding to activeKey | |
| disabled | Boolean | false | no effect for click or keydown for this item |
| onMouseEnter | Function({eventKey, domEvent}) | ||
| onMouseLeave | Function({eventKey, domEvent}) | ||
| onTitleMouseEnter | Function({eventKey, domEvent}) | ||
| onTitleMouseLeave | Function({eventKey, domEvent}) | ||
| onTitleClick | Function({eventKey, domEvent}) | ||
| popupOffset | Array | The offset of the popup submenu, in an x, y coordinate array. e.g.: `[0,15]` | |
| expandIcon | ReactNode | (props: SubMenuProps) => ReactNode | Specify the menu item icon. | |
| itemIcon | ReactNode | (props: SubMenuProps & { isSubMenu: boolean }) => ReactNode | Specify the menu item icon. |
Menu.Divider props
none
Menu.ItemGroup props
| name | type | default | description |
|---|---|---|---|
| ref | React.HTMLLIElement | get dom node | |
| title | String|React.Element | title of item group | |
| children | React.Element[] | MenuItems belonged to this group |
Development
npm install
npm startExample
http://localhost:8001/examples/index.md
online example: http://react-component.github.io/menu/examples/
Test Case
npm test
npm run chrome-testCoverage
npm run coverageopen coverage/ dir
License
rc-menu is released under the MIT license.