Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 802 Commits
.github		.github
.husky		.husky
assets		assets
docs		docs
src		src
tests		tests
.dumirc.ts		.dumirc.ts
.editorconfig		.editorconfig
.eslintrc.js		.eslintrc.js
.fatherrc.js		.fatherrc.js
.gitignore		.gitignore
.prettierrc		.prettierrc
CHANGELOG.md		CHANGELOG.md
LICENSE.md		LICENSE.md
README.md		README.md
bunfig.toml		bunfig.toml
index.js		index.js
jest.config.js		jest.config.js
now.json		now.json
package.json		package.json
tsconfig.json		tsconfig.json
type.d.ts		type.d.ts

Repository files navigation

rc-menu

React Menu Component. port fromhttps://github.com/kissyteam/menu

Install

Usage

importMenu,{SubMenu,MenuItem}from'rc-menu';ReactDOM.render(<Menu><MenuItem>1</MenuItem><SubMenutitle="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-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 fordom-align	seeplacements.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
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.

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.