uxcore-menu

uxcore-menu component for uxcore.

Usage no npm install needed!

<script type="module">
  import uxcoreMenu from 'https://cdn.skypack.dev/uxcore-menu';
</script>

README

uxcore-menu Dependency Status devDependency Status

TL;DR

uxcore-menu ui component for react

setup develop environment

$ git clone https://github.com/uxcore/uxcore-menu
$ cd uxcore-menu
$ npm install
$ gulp server

Usage

import ReactDOM from 'react-dom';
import RcMenu, {SubMenu, Item, Divider} from 'rc-menu';

ReactDOM.render(
    <Menu >
        <Item key="mail">
            <i className="kuma-icon kuma-icon-email"></i>导航一
        </Item>
        <Item key="app">
            <i className="kuma-icon kuma-icon-wangwang"></i>导航二
        </Item>
        <SubMenu title={<span><i className="kuma-icon kuma-icon-setting"></i>导航 - 子菜单</span>}>
            <Item key="setting:1">选项1</Item>
            <Item key="setting:2">选项2</Item>
            <Item key="setting:3">选项3</Item>
            <Item key="setting:4">选项4</Item>
        </SubMenu>
        <Item key="alipay">
            <a href="#" target="_blank">导航四 - 链接</a>
        </Item>
    </Menu>,
    target);

demo

http://uxcore.github.io/uxcore/components/menu/

API

Props

Menu

配置项 说明 类型 默认值
mode 菜单类型 enum 'vertical', 'horizontal', 'inline' vertical
selectedKeys 当前选中的菜单项 key 数组
defaultSelectedKeys 初始选中的菜单项 key 数组
openKeys 当前展开的菜单项 key 数组
defaultOpenKeys 初始展开的菜单项 key 数组
onSelect 被选中时调用，参数 {item, key, selectedKeys} 对象 function 无
onDeselect 取消选中时调用，参数 {item, key, selectedKeys} 对象，仅在 multiple 生效 function 无
onOpenChange 菜单打开或关闭时调用，参数 openKeys 数组 function 无
onOpen 同 onOpenChange，为了兼容旧版本保留的方法，将来会移除。参数 {openKeys} 对象 function 无
onClose 同 onOpenChange，为了兼容旧版本保留的方法，将来会移除。参数 {openKeys} 对象 function 无
onClick 点击 menuitem 调用此函数，参数为 {item, key} function 无
style 根节点样式 object
lineClamp 文字行数，超出则显示省略号（仅在 inline 模式下且支持 line-clamp 属性的浏览器上生效） number 1

Item

配置项 说明 类型 默认值
disabled 是否禁用 Boolean false
key item 的唯一标志 String

SubMenu

配置项 说明 类型 默认值
title 子菜单项值 String or React.Element
children (MenuItem or SubMenu)[] 子菜单的菜单项