14 KiB
14 KiB
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 |
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 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.