uxcore.js - React UI Component Set

组件演示

[{"title":"基本","id":"components-dropdown-demo-default","tags":[],"filepath":"site/components/dropdown/demo/default.md","directory":"components/dropdown/demo","filename":"default","meta":{"title":"基本","description":"\n最简单的用法。\n","order":"1","filepath":"site/components/dropdown/demo/default.md","filename":"default","directory":"components/dropdown/demo","id":"components-dropdown-demo-default","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nvar menu = React.createElement(\n _uxcore.Menu,\n null,\n React.createElement(\n _uxcore.Menu.Item,\n null,\n React.createElement(\n 'a',\n { target: '_blank', href: 'http://www.alipay.com/' },\n '\\u7B2C\\u4E00\\u4E2A\\u83DC\\u5355\\u9879'\n )\n ),\n React.createElement(\n _uxcore.Menu.Item,\n null,\n React.createElement(\n 'a',\n { target: '_blank', href: 'http://www.taobao.com/' },\n '\\u7B2C\\u4E8C\\u4E2A\\u83DC\\u5355\\u9879'\n )\n ),\n React.createElement(\n _uxcore.Menu.Item,\n null,\n React.createElement(\n 'a',\n { target: '_blank', href: 'http://www.tmall.com/' },\n '\\u7B2C\\u4E09\\u4E2A\\u83DC\\u5355\\u9879'\n )\n )\n);\n\nReactDOM.render(React.createElement(\n _uxcore.Dropdown,\n { overlay: menu },\n React.createElement(\n _uxcore.Button,\n null,\n 'hover\\u89E6\\u53D1'\n )\n), document.getElementById('components-dropdown-demo-default'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Dropdown } from 'uxcore';\nimport { Menu } from 'uxcore';\nimport { Button } from 'uxcore';\n\nconst menu = (<Menu>\n <Menu.Item>\n <a target=\"_blank\" href=\"http://www.alipay.com/\">第一个菜单项</a>\n </Menu.Item>\n <Menu.Item>\n <a target=\"_blank\" href=\"http://www.taobao.com/\">第二个菜单项</a>\n </Menu.Item>\n <Menu.Item>\n <a target=\"_blank\" href=\"http://www.tmall.com/\">第三个菜单项</a>\n </Menu.Item>\n</Menu>);\n\nReactDOM.render(\n <Dropdown overlay={menu}>\n <Button>hover触发</Button>\n </Dropdown>,\n document.getElementById('components-dropdown-demo-default')\n);</code></pre></div>"},"status":"public","toc":""},{"title":"点击触发","id":"components-dropdown-demo-click","tags":[],"filepath":"site/components/dropdown/demo/click.md","directory":"components/dropdown/demo","filename":"click","meta":{"title":"点击触发","description":"\n点击触发\n","order":"2","filepath":"site/components/dropdown/demo/click.md","filename":"click","directory":"components/dropdown/demo","id":"components-dropdown-demo-click","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nvar menu = React.createElement(\n _uxcore.Menu,\n null,\n React.createElement(\n _uxcore.Menu.Item,\n null,\n React.createElement(\n 'a',\n { target: '_blank', href: 'http://www.alipay.com/' },\n '\\u7B2C\\u4E00\\u4E2A\\u83DC\\u5355\\u9879'\n )\n ),\n React.createElement(\n _uxcore.Menu.Item,\n null,\n React.createElement(\n 'a',\n { target: '_blank', href: 'http://www.taobao.com/' },\n '\\u7B2C\\u4E8C\\u4E2A\\u83DC\\u5355\\u9879'\n )\n ),\n React.createElement(\n _uxcore.Menu.Item,\n null,\n React.createElement(\n 'a',\n { target: '_blank', href: 'http://www.tmall.com/' },\n '\\u7B2C\\u4E09\\u4E2A\\u83DC\\u5355\\u9879'\n )\n )\n);\n\nReactDOM.render(React.createElement(\n _uxcore.Dropdown,\n { overlay: menu, trigger: ['click'] },\n React.createElement(\n _uxcore.Button,\n null,\n '\\u70B9\\u51FB\\u89E6\\u53D1'\n )\n), document.getElementById('components-dropdown-demo-click'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Dropdown } from 'uxcore';\nimport { Menu } from 'uxcore';\nimport { Button } from 'uxcore';\n\nconst menu = (<Menu>\n <Menu.Item>\n <a target=\"_blank\" href=\"http://www.alipay.com/\">第一个菜单项</a>\n </Menu.Item>\n <Menu.Item>\n <a target=\"_blank\" href=\"http://www.taobao.com/\">第二个菜单项</a>\n </Menu.Item>\n <Menu.Item>\n <a target=\"_blank\" href=\"http://www.tmall.com/\">第三个菜单项</a>\n </Menu.Item>\n</Menu>);\n\nReactDOM.render(\n <Dropdown overlay={menu} trigger={['click']}>\n <Button>点击触发</Button>\n </Dropdown>,\n document.getElementById('components-dropdown-demo-click')\n);</code></pre></div>"},"status":"public","toc":""},{"title":"触发事件","id":"components-dropdown-demo-events","tags":[],"filepath":"site/components/dropdown/demo/events.md","directory":"components/dropdown/demo","filename":"events","meta":{"title":"触发事件","description":"\n触发事件\n","order":"3","filepath":"site/components/dropdown/demo/events.md","filename":"events","directory":"components/dropdown/demo","id":"components-dropdown-demo-events","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nvar onClick = function onClick(_ref) {\n var key = _ref.key;\n\n alert('\\u9009\\u4E2D\\u4E86\\u83DC\\u5355' + key);\n};\n\nvar menu = React.createElement(\n _uxcore.Menu,\n { onClick: onClick },\n React.createElement(\n _uxcore.Menu.Item,\n null,\n React.createElement(\n 'a',\n { target: '_blank', href: 'http://www.alipay.com/' },\n '\\u7B2C\\u4E00\\u4E2A\\u83DC\\u5355\\u9879'\n )\n ),\n React.createElement(\n _uxcore.Menu.Item,\n null,\n React.createElement(\n 'a',\n { target: '_blank', href: 'http://www.taobao.com/' },\n '\\u7B2C\\u4E8C\\u4E2A\\u83DC\\u5355\\u9879'\n )\n ),\n React.createElement(\n _uxcore.Menu.Item,\n null,\n React.createElement(\n 'a',\n { target: '_blank', href: 'http://www.tmall.com/' },\n '\\u7B2C\\u4E09\\u4E2A\\u83DC\\u5355\\u9879'\n )\n )\n);\n\nReactDOM.render(React.createElement(\n _uxcore.Dropdown,\n { overlay: menu },\n React.createElement(\n _uxcore.Button,\n null,\n '\\u89E6\\u53D1\\u4E8B\\u4EF6'\n )\n), document.getElementById('components-dropdown-demo-events'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Dropdown } from 'uxcore';\nimport { Menu } from 'uxcore';\nimport { Button } from 'uxcore';\n\nconst onClick = function ({ key }) {\n alert(`选中了菜单${key}`);\n};\n\nconst menu = (<Menu onClick={onClick}>\n <Menu.Item>\n <a target=\"_blank\" href=\"http://www.alipay.com/\">第一个菜单项</a>\n </Menu.Item>\n <Menu.Item>\n <a target=\"_blank\" href=\"http://www.taobao.com/\">第二个菜单项</a>\n </Menu.Item>\n <Menu.Item>\n <a target=\"_blank\" href=\"http://www.tmall.com/\">第三个菜单项</a>\n </Menu.Item>\n</Menu>);\n\nReactDOM.render(\n <Dropdown overlay={menu}>\n <Button>触发事件</Button>\n </Dropdown>,\n document.getElementById('components-dropdown-demo-events')\n);</code></pre></div>"},"status":"public","toc":""},{"title":"其他元素","id":"components-dropdown-demo-other","tags":[],"filepath":"site/components/dropdown/demo/other.md","directory":"components/dropdown/demo","filename":"other","meta":{"title":"其他元素","description":"\n分割线和不可用菜单项\n","order":"4","filepath":"site/components/dropdown/demo/other.md","filename":"other","directory":"components/dropdown/demo","id":"components-dropdown-demo-other","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nvar menu = React.createElement(\n _uxcore.Menu,\n null,\n React.createElement(\n _uxcore.Menu.Item,\n { key: '0' },\n React.createElement(\n 'a',\n { target: '_blank', href: 'http://www.alipay.com/' },\n '\\u7B2C\\u4E00\\u4E2A\\u83DC\\u5355\\u9879'\n )\n ),\n React.createElement(\n _uxcore.Menu.Item,\n { key: '1' },\n React.createElement(\n 'a',\n { target: '_blank', href: 'http://www.taobao.com/' },\n '\\u7B2C\\u4E8C\\u4E2A\\u83DC\\u5355\\u9879'\n )\n ),\n React.createElement(\n _uxcore.Menu.Item,\n { key: '3', disabled: true },\n '\\u7B2C\\u4E09\\u4E2A\\u83DC\\u5355\\u9879\\uFF08\\u4E0D\\u53EF\\u7528\\uFF09'\n )\n);\n\nReactDOM.render(React.createElement(\n _uxcore.Dropdown,\n { overlay: menu },\n React.createElement(\n _uxcore.Button,\n null,\n '\\u4E0D\\u53EF\\u7528\\u83DC\\u5355\\u9879'\n )\n), document.getElementById('components-dropdown-demo-other'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Dropdown } from 'uxcore';\nimport { Menu } from 'uxcore';\nimport { Button } from 'uxcore';\n\nconst menu = (<Menu>\n <Menu.Item key=\"0\">\n <a target=\"_blank\" href=\"http://www.alipay.com/\">第一个菜单项</a>\n </Menu.Item>\n <Menu.Item key=\"1\">\n <a target=\"_blank\" href=\"http://www.taobao.com/\">第二个菜单项</a>\n </Menu.Item>\n <Menu.Item key=\"3\" disabled>第三个菜单项（不可用）</Menu.Item>\n</Menu>);\n\nReactDOM.render(\n <Dropdown overlay={menu}>\n <Button>不可用菜单项</Button>\n </Dropdown>,\n document.getElementById('components-dropdown-demo-other')\n);</code></pre></div>"},"status":"public","toc":""},{"title":"无边框","id":"components-dropdown-demo-inline","tags":[],"filepath":"site/components/dropdown/demo/inline.md","directory":"components/dropdown/demo","filename":"inline","meta":{"title":"无边框","description":"\n无边框。\n","order":"5","filepath":"site/components/dropdown/demo/inline.md","filename":"inline","directory":"components/dropdown/demo","id":"components-dropdown-demo-inline","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 menu = React.createElement(\n _uxcore.Menu,\n null,\n React.createElement(\n _uxcore.Menu.Item,\n null,\n React.createElement(\n 'a',\n { target: '_blank', href: 'http://www.alipay.com/' },\n '\\u7B2C\\u4E00\\u4E2A\\u83DC\\u5355\\u9879'\n )\n ),\n React.createElement(\n _uxcore.Menu.Item,\n null,\n React.createElement(\n 'a',\n { target: '_blank', href: 'http://www.taobao.com/' },\n '\\u7B2C\\u4E8C\\u4E2A\\u83DC\\u5355\\u9879'\n )\n ),\n React.createElement(\n _uxcore.Menu.Item,\n null,\n React.createElement(\n 'a',\n { target: '_blank', href: 'http://www.tmall.com/' },\n '\\u7B2C\\u4E09\\u4E2A\\u83DC\\u5355\\u9879'\n )\n )\n);\n\nvar InlineDemo = function (_React$Component) {\n _inherits(InlineDemo, _React$Component);\n\n function InlineDemo(props) {\n _classCallCheck(this, InlineDemo);\n\n var _this = _possibleConstructorReturn(this, (InlineDemo.__proto__ || Object.getPrototypeOf(InlineDemo)).call(this, props));\n\n _this.state = {\n open: false\n };\n return _this;\n }\n\n _createClass(InlineDemo, [{\n key: 'render',\n value: function render() {\n var inlineDropdownCls = 'kuma-dropdown-inline-wrap';\n if (this.state.open) {\n inlineDropdownCls += ' kuma-dropdown-inline-wrap-open';\n }\n return React.createElement(\n _uxcore.Dropdown,\n { overlay: menu, overlayClassName: 'kuma-dropdown-inline', onVisibleChange: function (open) {\n this.setState({ open: open });\n }.bind(this) },\n React.createElement(\n 'div',\n { className: inlineDropdownCls },\n React.createElement('i', { className: 'kuma-icon kuma-icon-set' })\n )\n );\n }\n }]);\n\n return InlineDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(InlineDemo, null), document.getElementById('components-dropdown-demo-inline'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Dropdown } from 'uxcore';\nimport { Menu } from 'uxcore';\n\nconst menu = (<Menu>\n <Menu.Item>\n <a target=\"_blank\" href=\"http://www.alipay.com/\">第一个菜单项</a>\n </Menu.Item>\n <Menu.Item>\n <a target=\"_blank\" href=\"http://www.taobao.com/\">第二个菜单项</a>\n </Menu.Item>\n <Menu.Item>\n <a target=\"_blank\" href=\"http://www.tmall.com/\">第三个菜单项</a>\n </Menu.Item>\n</Menu>);\n\nclass InlineDemo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n open: false,\n };\n }\n render() {\n let inlineDropdownCls = 'kuma-dropdown-inline-wrap';\n if (this.state.open) {\n inlineDropdownCls += ' kuma-dropdown-inline-wrap-open';\n }\n return (\n <Dropdown overlay={menu} overlayClassName=\"kuma-dropdown-inline\" onVisibleChange={function (open) { this.setState({ open }); }.bind(this)}>\n <div className={inlineDropdownCls}>\n <i className=\"kuma-icon kuma-icon-set\" />\n </div>\n </Dropdown>\n );\n }\n}\n\nReactDOM.render(\n <InlineDemo />,\n document.getElementById('components-dropdown-demo-inline')\n);</code></pre></div>"},"status":"public","toc":""}]

基本

最简单的用法。

import { Dropdown } from 'uxcore';
import { Menu } from 'uxcore';
import { Button } from 'uxcore';

const menu = (<Menu>
  <Menu.Item>
    <a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
  </Menu.Item>
  <Menu.Item>
    <a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
  </Menu.Item>
  <Menu.Item>
    <a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
  </Menu.Item>
</Menu>);

ReactDOM.render(
  <Dropdown overlay={menu}>
    <Button>hover触发</Button>
  </Dropdown>,
    document.getElementById('components-dropdown-demo-default')
);

点击触发

import { Dropdown } from 'uxcore';
import { Menu } from 'uxcore';
import { Button } from 'uxcore';

const menu = (<Menu>
  <Menu.Item>
    <a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
  </Menu.Item>
  <Menu.Item>
    <a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
  </Menu.Item>
  <Menu.Item>
    <a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
  </Menu.Item>
</Menu>);

ReactDOM.render(
  <Dropdown overlay={menu} trigger={['click']}>
    <Button>点击触发</Button>
  </Dropdown>,
    document.getElementById('components-dropdown-demo-click')
);

触发事件

import { Dropdown } from 'uxcore';
import { Menu } from 'uxcore';
import { Button } from 'uxcore';

const onClick = function ({ key }) {
  alert(`选中了菜单${key}`);
};

const menu = (<Menu onClick={onClick}>
  <Menu.Item>
    <a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
  </Menu.Item>
  <Menu.Item>
    <a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
  </Menu.Item>
  <Menu.Item>
    <a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
  </Menu.Item>
</Menu>);

ReactDOM.render(
  <Dropdown overlay={menu}>
    <Button>触发事件</Button>
  </Dropdown>,
    document.getElementById('components-dropdown-demo-events')
);

其他元素

分割线和不可用菜单项

import { Dropdown } from 'uxcore';
import { Menu } from 'uxcore';
import { Button } from 'uxcore';

const menu = (<Menu>
  <Menu.Item key="0">
    <a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
  </Menu.Item>
  <Menu.Item key="1">
    <a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
  </Menu.Item>
  <Menu.Item key="3" disabled>第三个菜单项（不可用）</Menu.Item>
</Menu>);

ReactDOM.render(
  <Dropdown overlay={menu}>
    <Button>不可用菜单项</Button>
  </Dropdown>,
    document.getElementById('components-dropdown-demo-other')
);

无边框

无边框。

import { Dropdown } from 'uxcore';
import { Menu } from 'uxcore';

const menu = (<Menu>
  <Menu.Item>
    <a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
  </Menu.Item>
  <Menu.Item>
    <a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
  </Menu.Item>
  <Menu.Item>
    <a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
  </Menu.Item>
</Menu>);

class InlineDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
    };
  }
  render() {
    let inlineDropdownCls = 'kuma-dropdown-inline-wrap';
    if (this.state.open) {
      inlineDropdownCls += ' kuma-dropdown-inline-wrap-open';
    }
    return (
      <Dropdown overlay={menu} overlayClassName="kuma-dropdown-inline" onVisibleChange={function (open) { this.setState({ open }); }.bind(this)}>
        <div className={inlineDropdownCls}>
          <i className="kuma-icon kuma-icon-set" />
        </div>
      </Dropdown>
    );
  }
}

ReactDOM.render(
  <InlineDemo />,
    document.getElementById('components-dropdown-demo-inline')
);

向下弹出的列表。

何时使用

当页面元素过多时，用此组件可以收纳元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。

API

参数	说明	类型	默认值
trigger	触发下来行为	array	`['hover']`
overlay	菜单节点	react element	无
onVisibleChange	当 visible 改变时触发	Function	noop
visible	是否可见	boolean	false