uxcore.js - React UI Component Set

组件演示

[{"title":"顶部导航","id":"components-menu-demo-basic","tags":[],"filepath":"site/components/menu/demo/basic.md","directory":"components/menu/demo","filename":"basic","meta":{"title":"顶部导航","description":"\n水平的顶部导航菜单。\n","order":"0","filepath":"site/components/menu/demo/basic.md","filename":"basic","directory":"components/menu/demo","id":"components-menu-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar SubMenu = _uxcore.Menu.SubMenu;\nvar MenuItem = _uxcore.Menu.Item;\nwindow.Menu = _uxcore.Menu;\n\nfunction handleClick(e) {\n console.log('click', e);\n}\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n current: 'mail'\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleClick',\n value: function handleClick(e) {\n console.log('click ', e);\n this.setState({\n current: e.key\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n _uxcore.Menu,\n { onClick: this.handleClick.bind(this), selectedKeys: [this.state.current], mode: 'horizontal' },\n React.createElement(\n _uxcore.Menu.Item,\n { key: 'mail' },\n React.createElement('i', { className: 'kuma-icon kuma-icon-email' }),\n '\\u5BFC\\u822A\\u4E00'\n ),\n React.createElement(\n _uxcore.Menu.Item,\n { key: 'app' },\n React.createElement('i', { className: 'kuma-icon kuma-icon-wangwang' }),\n '\\u5BFC\\u822A\\u4E8C'\n ),\n React.createElement(\n SubMenu,\n { title: React.createElement(\n 'span',\n null,\n React.createElement('i', { className: 'kuma-icon kuma-icon-setting' }),\n '\\u5BFC\\u822A - \\u5B50\\u83DC\\u5355'\n ) },\n React.createElement(\n _uxcore.Menu.Item,\n { key: 'setting:1' },\n '\\u9009\\u98791'\n ),\n React.createElement(\n _uxcore.Menu.Item,\n { key: 'setting:2' },\n '\\u9009\\u98792'\n ),\n React.createElement(\n _uxcore.Menu.Item,\n { key: 'setting:3' },\n '\\u9009\\u98793'\n ),\n React.createElement(\n _uxcore.Menu.Item,\n { key: 'setting:4' },\n '\\u9009\\u98794'\n )\n ),\n React.createElement(\n _uxcore.Menu.Item,\n { key: 'alipay' },\n React.createElement(\n 'a',\n { href: '#', target: '_blank' },\n '\\u5BFC\\u822A\\u56DB - \\u94FE\\u63A5'\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-menu-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Menu } from 'uxcore';\nconst SubMenu = Menu.SubMenu;\nconst MenuItem = Menu.Item;\nwindow.Menu = Menu;\n\nfunction handleClick(e) {\n console.log('click', e);\n}\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n current: 'mail',\n };\n }\n\n handleClick(e) {\n console.log('click ', e);\n this.setState({\n current: e.key,\n });\n }\n\n render() {\n return (\n <Menu onClick={this.handleClick.bind(this)} selectedKeys={[this.state.current]} mode=\"horizontal\">\n <Menu.Item key=\"mail\">\n <i className=\"kuma-icon kuma-icon-email\" />导航一\n </Menu.Item>\n <Menu.Item key=\"app\">\n <i className=\"kuma-icon kuma-icon-wangwang\" />导航二\n </Menu.Item>\n <SubMenu title={<span><i className=\"kuma-icon kuma-icon-setting\" />导航 - 子菜单</span>}>\n <Menu.Item key=\"setting:1\">选项1</Menu.Item>\n <Menu.Item key=\"setting:2\">选项2</Menu.Item>\n <Menu.Item key=\"setting:3\">选项3</Menu.Item>\n <Menu.Item key=\"setting:4\">选项4</Menu.Item>\n </SubMenu>\n <Menu.Item key=\"alipay\">\n <a href=\"#\" target=\"_blank\">导航四 - 链接</a>\n </Menu.Item>\n </Menu>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-menu-demo-basic'));</code></pre></div>"},"status":"public","toc":""},{"title":"无边框的样式","id":"components-menu-demo-nw","tags":[],"filepath":"site/components/menu/demo/nw.md","directory":"components/menu/demo","filename":"nw","meta":{"title":"无边框的样式","description":"\n垂直内嵌菜单的另一种样式，通过设置类名 kuma-menu-none-border 来实现无边框的样式。\n","order":"4","filepath":"site/components/menu/demo/nw.md","filename":"nw","directory":"components/menu/demo","id":"components-menu-demo-nw","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar SubMenu = _uxcore.Menu.SubMenu;\nvar MenuItem = _uxcore.Menu.Item;\n\nfunction handleClick(e) {\n console.log('click', e);\n}\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n current: '1'\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleClick',\n value: function handleClick(e) {\n console.log('click ', e);\n this.setState({\n current: e.key\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n _uxcore.Menu,\n { onClick: this.handleClick.bind(this),\n style: { width: 240 },\n className: 'kuma-menu-none-border',\n defaultOpenKeys: ['sub1'],\n selectedKeys: [this.state.current],\n mode: 'inline'\n },\n React.createElement(\n SubMenu,\n { key: 'sub1', title: React.createElement(\n 'span',\n null,\n React.createElement('i', { className: 'kuma-icon kuma-icon-email' }),\n React.createElement(\n 'span',\n null,\n '\\u5BFC\\u822A\\u4E00'\n )\n ) },\n React.createElement(\n _uxcore.Menu.Item,\n { key: '1' },\n '\\u9009\\u98791'\n ),\n React.createElement(\n _uxcore.Menu.Item,\n { key: '2' },\n '\\u9009\\u98792'\n ),\n React.createElement(\n _uxcore.Menu.Item,\n { key: '3' },\n '\\u9009\\u98793'\n ),\n React.createElement(\n _uxcore.Menu.Item,\n { key: '4' },\n '\\u9009\\u98794'\n )\n ),\n React.createElement(\n SubMenu,\n { key: 'sub2', title: React.createElement(\n 'span',\n null,\n React.createElement('i', { className: 'kuma-icon kuma-icon-wangwang' }),\n React.createElement(\n 'span',\n null,\n '\\u5BFC\\u822A\\u4E8C'\n )\n ) },\n React.createElement(\n _uxcore.Menu.Item,\n { key: '5' },\n '\\u9009\\u98795'\n ),\n React.createElement(\n _uxcore.Menu.Item,\n { key: '6' },\n '\\u9009\\u98796'\n ),\n React.createElement(\n SubMenu,\n { key: 'sub3', title: '\\u4E09\\u7EA7\\u5BFC\\u822A' },\n React.createElement(\n _uxcore.Menu.Item,\n { key: '7' },\n '\\u9009\\u98797'\n ),\n React.createElement(\n _uxcore.Menu.Item,\n { key: '8' },\n '\\u9009\\u98798'\n )\n )\n ),\n React.createElement(\n SubMenu,\n { key: 'sub4', title: React.createElement(\n 'span',\n null,\n React.createElement('i', { className: 'kuma-icon kuma-icon-boss' }),\n React.createElement(\n 'span',\n null,\n '\\u5BFC\\u822A\\u4E09'\n )\n ) },\n React.createElement(\n _uxcore.Menu.Item,\n { key: '9' },\n '\\u9009\\u98799'\n ),\n React.createElement(\n _uxcore.Menu.Item,\n { key: '10' },\n '\\u9009\\u987910'\n ),\n React.createElement(\n _uxcore.Menu.Item,\n { key: '11' },\n '\\u9009\\u987911'\n ),\n React.createElement(\n _uxcore.Menu.Item,\n { key: '12' },\n '\\u9009\\u987912'\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-menu-demo-nw'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Menu } from 'uxcore';\nconst SubMenu = Menu.SubMenu;\nconst MenuItem = Menu.Item;\n\nfunction handleClick(e) {\n console.log('click', e);\n}\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n current: '1',\n };\n }\n\n handleClick(e) {\n console.log('click ', e);\n this.setState({\n current: e.key,\n });\n }\n\n render() {\n return (\n <Menu onClick={this.handleClick.bind(this)}\n style={{ width: 240 }}\n className=\"kuma-menu-none-border\"\n defaultOpenKeys={['sub1']}\n selectedKeys={[this.state.current]}\n mode=\"inline\"\n >\n <SubMenu key=\"sub1\" title={<span><i className=\"kuma-icon kuma-icon-email\" /><span>导航一</span></span>}>\n <Menu.Item key=\"1\">选项1</Menu.Item>\n <Menu.Item key=\"2\">选项2</Menu.Item>\n <Menu.Item key=\"3\">选项3</Menu.Item>\n <Menu.Item key=\"4\">选项4</Menu.Item>\n </SubMenu>\n <SubMenu key=\"sub2\" title={<span><i className=\"kuma-icon kuma-icon-wangwang\" /><span>导航二</span></span>}>\n <Menu.Item key=\"5\">选项5</Menu.Item>\n <Menu.Item key=\"6\">选项6</Menu.Item>\n <SubMenu key=\"sub3\" title=\"三级导航\">\n <Menu.Item key=\"7\">选项7</Menu.Item>\n <Menu.Item key=\"8\">选项8</Menu.Item>\n </SubMenu>\n </SubMenu>\n <SubMenu key=\"sub4\" title={<span><i className=\"kuma-icon kuma-icon-boss\" /><span>导航三</span></span>}>\n <Menu.Item key=\"9\">选项9</Menu.Item>\n <Menu.Item key=\"10\">选项10</Menu.Item>\n <Menu.Item key=\"11\">选项11</Menu.Item>\n <Menu.Item key=\"12\">选项12</Menu.Item>\n </SubMenu>\n </Menu>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n , document.getElementById('components-menu-demo-nw'));</code></pre></div>"},"status":"public","toc":""}]

顶部导航

水平的顶部导航菜单。

import { Menu } from 'uxcore';
const SubMenu = Menu.SubMenu;
const MenuItem = Menu.Item;
window.Menu = Menu;

function handleClick(e) {
  console.log('click', e);
}

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      current: 'mail',
    };
  }

  handleClick(e) {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  }

  render() {
    return (
      <Menu onClick={this.handleClick.bind(this)} selectedKeys={[this.state.current]} mode="horizontal">
        <Menu.Item key="mail">
          <i className="kuma-icon kuma-icon-email" />导航一
        </Menu.Item>
        <Menu.Item key="app">
          <i className="kuma-icon kuma-icon-wangwang" />导航二
        </Menu.Item>
        <SubMenu title={<span><i className="kuma-icon kuma-icon-setting" />导航 - 子菜单</span>}>
          <Menu.Item key="setting:1">选项1</Menu.Item>
          <Menu.Item key="setting:2">选项2</Menu.Item>
          <Menu.Item key="setting:3">选项3</Menu.Item>
          <Menu.Item key="setting:4">选项4</Menu.Item>
        </SubMenu>
        <Menu.Item key="alipay">
          <a href="#" target="_blank">导航四 - 链接</a>
        </Menu.Item>
      </Menu>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-menu-demo-basic'));

无边框的样式

垂直内嵌菜单的另一种样式，通过设置类名 kuma-menu-none-border 来实现无边框的样式。

import { Menu } from 'uxcore';
const SubMenu = Menu.SubMenu;
const MenuItem = Menu.Item;

function handleClick(e) {
  console.log('click', e);
}

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      current: '1',
    };
  }

  handleClick(e) {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  }

  render() {
    return (
      <Menu onClick={this.handleClick.bind(this)}
        style={{ width: 240 }}
        className="kuma-menu-none-border"
        defaultOpenKeys={['sub1']}
        selectedKeys={[this.state.current]}
        mode="inline"
      >
        <SubMenu key="sub1" title={<span><i className="kuma-icon kuma-icon-email" /><span>导航一</span></span>}>
          <Menu.Item key="1">选项1</Menu.Item>
          <Menu.Item key="2">选项2</Menu.Item>
          <Menu.Item key="3">选项3</Menu.Item>
          <Menu.Item key="4">选项4</Menu.Item>
        </SubMenu>
        <SubMenu key="sub2" title={<span><i className="kuma-icon kuma-icon-wangwang" /><span>导航二</span></span>}>
          <Menu.Item key="5">选项5</Menu.Item>
          <Menu.Item key="6">选项6</Menu.Item>
          <SubMenu key="sub3" title="三级导航">
            <Menu.Item key="7">选项7</Menu.Item>
            <Menu.Item key="8">选项8</Menu.Item>
          </SubMenu>
        </SubMenu>
        <SubMenu key="sub4" title={<span><i className="kuma-icon kuma-icon-boss" /><span>导航三</span></span>}>
          <Menu.Item key="9">选项9</Menu.Item>
          <Menu.Item key="10">选项10</Menu.Item>
          <Menu.Item key="11">选项11</Menu.Item>
          <Menu.Item key="12">选项12</Menu.Item>
        </SubMenu>
      </Menu>
    );
  }
}

ReactDOM.render(
  <Demo />
  , document.getElementById('components-menu-demo-nw'));

为页面和功能提供导航的菜单列表。

API

Props

配置项	说明	类型	默认值
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

Item

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

SubMenu

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