noi-menu
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
Forked
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.
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 |
---|---|---|---|
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. |
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 | |
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 |
---|---|---|---|
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. |
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
npm test
npm run chrome-test
Coverage
npm run coverage
open coverage/ dir
License
rc-menu is released under the MIT license.