React Menu Component. port from https://github.com/kissyteam/menu
[![NPM version][npm-image]][npm-url] [npm-image]: http://img.shields.io/npm/v/rc-menu.svg?style=flat-square [npm-url]: http://npmjs.org/package/rc-menu
This is a Fork of the rc-menu library, modified so it uses a tag as opposed to an tag to render the submenu arrow icon. tags cause issues with the WCAG 2.0 (Level AA)) accessibility guidelines as is technically an obsolete tag designed to render italics, and should not be used as an icon placeholder.
This is forked from version 8.5.0 of the library.
import Menu, { SubMenu, MenuItem } from 'rc-menu';
ReactDOM.render(
<Menu>
<MenuItem>1</MenuItem>
<SubMenu title="2">
<MenuItem>2-1</MenuItem>
</SubMenu>
</Menu>,
container,
);
IE / Edge |
Firefox |
Chrome |
Safari |
Electron |
---|---|---|---|---|
IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
name | type | default | description |
---|---|---|---|
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-animate 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. |
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 | |
onMouseEnter | Function({eventKey, domEvent}) | ||
onMouseLeave | Function({eventKey, domEvent}) | ||
itemIcon | ReactNode | (props: MenuItemProps) => ReactNode | Specify the menu item icon. |
name | type | default | description |
---|---|---|---|
popupClassName | String | additional css class 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. |
none
name | type | default | description |
---|---|---|---|
title | String|React.Element | title of item group | |
children | React.Element[] | MenuItems belonged to this group |
npm install
npm start
http://localhost:8001/examples/index.md
online example: http://react-component.github.io/menu/examples/
npm test
npm run chrome-test
npm run coverage
open coverage/ dir
rc-menu is released under the MIT license.