Fetch the repository succeeded.
React Menu Component. port from https://github.com/kissyteam/menu
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 |
|---|---|---|---|
| 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-component/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". |
| 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. |
| 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. |
none
| 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 |
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.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手