JSPM

dw-neit-rc-menu

9.14.1
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 1
    • Score
      100M100P100Q39465F
    • License MIT

    menu ui component for react

    Package Exports

    • dw-neit-rc-menu
    • dw-neit-rc-menu/es/index.js
    • dw-neit-rc-menu/lib/index.js

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (dw-neit-rc-menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    dw-neit-rc-menu

    React Menu Component. port from https://github.com/kissyteam/menu

    NPM version npm download build status Codecov bundle size dumi

    Install

    dw-neit-rc-menu

    Usage

    import Menu, { SubMenu, MenuItem } from 'dw-neit-rc-menu';

ReactDOM.render(
  <Menu>
    <MenuItem>1</MenuItem>
    <SubMenu title="2">
      <MenuItem>2-1</MenuItem>
    </SubMenu>
  </Menu>,
  container,
);

    Compatibility

    IE / Edge
    IE / Edge    		 Firefox
    Firefox    		 Chrome
    Chrome    		 Safari
    Safari    		 Electron
    Electron
    IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

    API

    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 dw-neit-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

    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

    dw-neit-rc-menu is released under the MIT license.