组件演示

[{"title":"基本","id":"components-dropdown-demo-default","tags":[],"filepath":"site/components/dropdown/demo/default.md","directory":"components/dropdown/demo","filename":"default","meta":{"title":"基本","description":"\n<p>最简单的用法。</p>\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\"><span class=\"hljs-keyword\">import</span> { Dropdown } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Menu } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-keyword\">const</span> menu = (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span> <span class=\"hljs-attribute\">target</span>=<span class=\"hljs-value\">\"_blank\"</span> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"http://www.alipay.com/\"</span>&gt;</span>第一个菜单项<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span> <span class=\"hljs-attribute\">target</span>=<span class=\"hljs-value\">\"_blank\"</span> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"http://www.taobao.com/\"</span>&gt;</span>第二个菜单项<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span> <span class=\"hljs-attribute\">target</span>=<span class=\"hljs-value\">\"_blank\"</span> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"http://www.tmall.com/\"</span>&gt;</span>第三个菜单项<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu</span>&gt;</span>)</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Dropdown</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{menu}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>&gt;</span>hover触发<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Dropdown</span>&gt;</span>,\n document.getElementById('components-dropdown-demo-default')\n);</span></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<p>点击触发</p>\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\"><span class=\"hljs-keyword\">import</span> { Dropdown } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Menu } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-keyword\">const</span> menu = (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span> <span class=\"hljs-attribute\">target</span>=<span class=\"hljs-value\">\"_blank\"</span> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"http://www.alipay.com/\"</span>&gt;</span>第一个菜单项<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span> <span class=\"hljs-attribute\">target</span>=<span class=\"hljs-value\">\"_blank\"</span> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"http://www.taobao.com/\"</span>&gt;</span>第二个菜单项<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span> <span class=\"hljs-attribute\">target</span>=<span class=\"hljs-value\">\"_blank\"</span> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"http://www.tmall.com/\"</span>&gt;</span>第三个菜单项<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu</span>&gt;</span>)</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Dropdown</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{menu}</span> <span class=\"hljs-attribute\">trigger</span>=<span class=\"hljs-value\">{['click']}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>&gt;</span>点击触发<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Dropdown</span>&gt;</span>,\n document.getElementById('components-dropdown-demo-click')\n);</span></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<p>触发事件</p>\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\"><span class=\"hljs-keyword\">import</span> { Dropdown } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Menu } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-keyword\">const</span> onClick = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> (<span class=\"hljs-params\">{ key }</span>) </span>{\n alert(<span class=\"hljs-string\">`选中了菜单<span class=\"hljs-subst\">${key}</span>`</span>);\n};\n\n<span class=\"hljs-keyword\">const</span> menu = (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{onClick}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span> <span class=\"hljs-attribute\">target</span>=<span class=\"hljs-value\">\"_blank\"</span> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"http://www.alipay.com/\"</span>&gt;</span>第一个菜单项<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span> <span class=\"hljs-attribute\">target</span>=<span class=\"hljs-value\">\"_blank\"</span> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"http://www.taobao.com/\"</span>&gt;</span>第二个菜单项<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span> <span class=\"hljs-attribute\">target</span>=<span class=\"hljs-value\">\"_blank\"</span> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"http://www.tmall.com/\"</span>&gt;</span>第三个菜单项<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu</span>&gt;</span>)</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Dropdown</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{menu}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>&gt;</span>触发事件<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Dropdown</span>&gt;</span>,\n document.getElementById('components-dropdown-demo-events')\n);</span></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<p>分割线和不可用菜单项</p>\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\"><span class=\"hljs-keyword\">import</span> { Dropdown } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Menu } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-keyword\">const</span> menu = (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu.Item</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">\"0\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span> <span class=\"hljs-attribute\">target</span>=<span class=\"hljs-value\">\"_blank\"</span> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"http://www.alipay.com/\"</span>&gt;</span>第一个菜单项<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu.Item</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">\"1\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span> <span class=\"hljs-attribute\">target</span>=<span class=\"hljs-value\">\"_blank\"</span> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"http://www.taobao.com/\"</span>&gt;</span>第二个菜单项<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu.Item</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">\"3\"</span> <span class=\"hljs-attribute\">disabled</span>&gt;</span>第三个菜单项(不可用)<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu</span>&gt;</span>)</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Dropdown</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{menu}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>&gt;</span>不可用菜单项<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Dropdown</span>&gt;</span>,\n document.getElementById('components-dropdown-demo-other')\n);</span></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<p>无边框。</p>\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\"><span class=\"hljs-keyword\">import</span> { Dropdown } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Menu } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-keyword\">const</span> menu = (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span> <span class=\"hljs-attribute\">target</span>=<span class=\"hljs-value\">\"_blank\"</span> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"http://www.alipay.com/\"</span>&gt;</span>第一个菜单项<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span> <span class=\"hljs-attribute\">target</span>=<span class=\"hljs-value\">\"_blank\"</span> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"http://www.taobao.com/\"</span>&gt;</span>第二个菜单项<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span> <span class=\"hljs-attribute\">target</span>=<span class=\"hljs-value\">\"_blank\"</span> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"http://www.tmall.com/\"</span>&gt;</span>第三个菜单项<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu</span>&gt;</span>)</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">InlineDemo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n open: <span class=\"hljs-literal\">false</span>,\n };\n }\n render() {\n <span class=\"hljs-keyword\">let</span> inlineDropdownCls = <span class=\"hljs-string\">'kuma-dropdown-inline-wrap'</span>;\n <span class=\"hljs-keyword\">if</span> (<span class=\"hljs-keyword\">this</span>.state.open) {\n inlineDropdownCls += <span class=\"hljs-string\">' kuma-dropdown-inline-wrap-open'</span>;\n }\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Dropdown</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{menu}</span> <span class=\"hljs-attribute\">overlayClassName</span>=<span class=\"hljs-value\">\"kuma-dropdown-inline\"</span> <span class=\"hljs-attribute\">onVisibleChange</span>=<span class=\"hljs-value\">{function</span> (<span class=\"hljs-attribute\">open</span>) { <span class=\"hljs-attribute\">this.setState</span>({ <span class=\"hljs-attribute\">open</span> }); }<span class=\"hljs-attribute\">.bind</span>(<span class=\"hljs-attribute\">this</span>)}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">{inlineDropdownCls}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">i</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"kuma-icon kuma-icon-set\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Dropdown</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">InlineDemo</span> /&gt;</span>,\n document.getElementById('components-dropdown-demo-inline')\n);</span></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