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-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 |
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.
menu's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.