组件演示

[{"title":"顶部导航","id":"components-menu-demo-basic","tags":[],"filepath":"site/components/menu/demo/basic.md","directory":"components/menu/demo","filename":"basic","meta":{"title":"顶部导航","description":"\n<p>水平的顶部导航菜单。</p>\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\"><span class=\"hljs-keyword\">import</span> { Menu } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> SubMenu = Menu.SubMenu;\n<span class=\"hljs-keyword\">const</span> MenuItem = Menu.Item;\n<span class=\"hljs-built_in\">window</span>.Menu = Menu;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">handleClick</span>(<span class=\"hljs-params\">e</span>) </span>{\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">'click'</span>, e);\n}\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n current: <span class=\"hljs-string\">'mail'</span>,\n };\n }\n\n handleClick(e) {\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">'click '</span>, e);\n <span class=\"hljs-keyword\">this</span>.setState({\n current: e.key,\n });\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{this.handleClick.bind(this)}</span> <span class=\"hljs-attribute\">selectedKeys</span>=<span class=\"hljs-value\">{[this.state.current]}</span> <span class=\"hljs-attribute\">mode</span>=<span class=\"hljs-value\">\"horizontal\"</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\">\"mail\"</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-email\"</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\">\"app\"</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-wangwang\"</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\">SubMenu</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{&lt;span</span>&gt;</span><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-setting\"</span> /&gt;</span>导航 - 子菜单<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">span</span>&gt;</span>}&gt;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu.Item</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">\"setting:1\"</span>&gt;</span>选项1<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\">\"setting:2\"</span>&gt;</span>选项2<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\">\"setting:3\"</span>&gt;</span>选项3<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\">\"setting:4\"</span>&gt;</span>选项4<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">SubMenu</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\">\"alipay\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"#\"</span> <span class=\"hljs-attribute\">target</span>=<span class=\"hljs-value\">\"_blank\"</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>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-menu-demo-basic'));</span></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<p>垂直内嵌菜单的另一种样式,通过设置类名 kuma-menu-none-border 来实现无边框的样式。</p>\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\"><span class=\"hljs-keyword\">import</span> { Menu } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> SubMenu = Menu.SubMenu;\n<span class=\"hljs-keyword\">const</span> MenuItem = Menu.Item;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">handleClick</span>(<span class=\"hljs-params\">e</span>) </span>{\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">'click'</span>, e);\n}\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n current: <span class=\"hljs-string\">'1'</span>,\n };\n }\n\n handleClick(e) {\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">'click '</span>, e);\n <span class=\"hljs-keyword\">this</span>.setState({\n current: e.key,\n });\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{this.handleClick.bind(this)}</span>\n <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">240</span> }}\n <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"kuma-menu-none-border\"</span>\n <span class=\"hljs-attribute\">defaultOpenKeys</span>=<span class=\"hljs-value\">{['sub1']}</span>\n <span class=\"hljs-attribute\">selectedKeys</span>=<span class=\"hljs-value\">{[this.state.current]}</span>\n <span class=\"hljs-attribute\">mode</span>=<span class=\"hljs-value\">\"inline\"</span>\n &gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">SubMenu</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">\"sub1\"</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{&lt;span</span>&gt;</span><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-email\"</span> /&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">span</span>&gt;</span>导航一<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">span</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">span</span>&gt;</span>}&gt;\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>选项1<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\">\"2\"</span>&gt;</span>选项2<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>&gt;</span>选项3<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\">\"4\"</span>&gt;</span>选项4<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">SubMenu</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">SubMenu</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">\"sub2\"</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{&lt;span</span>&gt;</span><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-wangwang\"</span> /&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">span</span>&gt;</span>导航二<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">span</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">span</span>&gt;</span>}&gt;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu.Item</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">\"5\"</span>&gt;</span>选项5<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\">\"6\"</span>&gt;</span>选项6<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">SubMenu</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">\"sub3\"</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">\"三级导航\"</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\">\"7\"</span>&gt;</span>选项7<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\">\"8\"</span>&gt;</span>选项8<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">SubMenu</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">SubMenu</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">SubMenu</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">\"sub4\"</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{&lt;span</span>&gt;</span><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-boss\"</span> /&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">span</span>&gt;</span>导航三<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">span</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">span</span>&gt;</span>}&gt;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Menu.Item</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">\"9\"</span>&gt;</span>选项9<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\">\"10\"</span>&gt;</span>选项10<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\">\"11\"</span>&gt;</span>选项11<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\">\"12\"</span>&gt;</span>选项12<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu.Item</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">SubMenu</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Menu</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n , document.getElementById('components-menu-demo-nw'));</span></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
配置项 说明 类型 默认值
title 子菜单项值 String or React.Element
children (MenuItem or SubMenu)[] 子菜单的菜单项