uxcore.js - React UI Component Set

组件演示

[{"title":"左侧自适应，右侧固定","id":"components-layout-demo-leftfixed","tags":[],"filepath":"site/components/layout/demo/leftfixed.md","directory":"components/layout/demo","filename":"leftfixed","meta":{"title":"左侧自适应，右侧固定","description":"\n右侧定宽 190 px，左侧自适应\n","order":"0","filepath":"site/components/layout/demo/leftfixed.md","filename":"leftfixed","directory":"components/layout/demo","id":"components-layout-demo-leftfixed","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\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\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 Left = _uxcore.Layout.Left,\n Right = _uxcore.Layout.Right;\n;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Layout,\n { className: 'layoutDemo' },\n React.createElement(\n Left,\n { adaptive: true, className: 'left' },\n '\\u5DE6'\n ),\n React.createElement(\n Right,\n { width: 190, className: 'right' },\n '\\u53F3'\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-layout-demo-leftfixed'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Layout } from 'uxcore';\nconst { Left, Right } = Layout;\nimport classnames from 'classnames';;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return (<div>\n <Layout className=\"layoutDemo\">\n <Left adaptive className=\"left\">左</Left>\n <Right width={190} className=\"right\">右</Right>\n </Layout>\n </div>);\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-layout-demo-leftfixed'));</code></pre></div><style type=\"text/css\">.layoutDemo .left {\n text-align: center;\n line-height: 200px;\n font-size: 32px;\n background: lightblue;\n}\n.layoutDemo .right {\n text-align: center;\n line-height: 200px;\n font-size: 32px;\n background: yellowgreen;\n}\n.layoutDemo.fixed {\n min-width: 1000px;\n}\n.layoutDemo p {\n font-size: 24px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.layoutDemo .left {\n text-align: center;\n line-height: 200px;\n font-size: 32px;\n background: lightblue;\n}\n.layoutDemo .right {\n text-align: center;\n line-height: 200px;\n font-size: 32px;\n background: yellowgreen;\n}\n.layoutDemo.fixed {\n min-width: 1000px;\n}\n.layoutDemo p {\n font-size: 24px;\n}</code></pre></div>"},"status":"public","toc":""},{"title":"右侧自适应，左侧固定","id":"components-layout-demo-rightfixed","tags":[],"filepath":"site/components/layout/demo/rightfixed.md","directory":"components/layout/demo","filename":"rightfixed","meta":{"title":"右侧自适应，左侧固定","description":"\n左侧定宽 190 px，右侧自适应\n","order":"1","filepath":"site/components/layout/demo/rightfixed.md","filename":"rightfixed","directory":"components/layout/demo","id":"components-layout-demo-rightfixed","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\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\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 Left = _uxcore.Layout.Left,\n Right = _uxcore.Layout.Right;\n;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Layout,\n { className: 'layoutDemo' },\n React.createElement(\n Left,\n { width: 190, className: 'left' },\n '\\u5DE6'\n ),\n React.createElement(\n Right,\n { adaptive: true, className: 'right' },\n '\\u53F3'\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-layout-demo-rightfixed'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Layout } from 'uxcore';\nconst { Left, Right } = Layout;\nimport classnames from 'classnames';;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return (<div>\n <Layout className=\"layoutDemo\">\n <Left width={190} className=\"left\">左</Left>\n <Right adaptive className=\"right\">右</Right>\n </Layout>\n </div>);\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-layout-demo-rightfixed'));</code></pre></div><style type=\"text/css\">.layoutDemo .left {\n text-align: center;\n line-height: 200px;\n font-size: 32px;\n background: lightblue;\n}\n.layoutDemo .right {\n text-align: center;\n line-height: 200px;\n font-size: 32px;\n background: yellowgreen;\n}\n.layoutDemo.fixed {\n min-width: 1000px;\n}\n.layoutDemo p {\n font-size: 24px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.layoutDemo .left {\n text-align: center;\n line-height: 200px;\n font-size: 32px;\n background: lightblue;\n}\n.layoutDemo .right {\n text-align: center;\n line-height: 200px;\n font-size: 32px;\n background: yellowgreen;\n}\n.layoutDemo.fixed {\n min-width: 1000px;\n}\n.layoutDemo p {\n font-size: 24px;\n}</code></pre></div>"},"status":"public","toc":""},{"title":"左右都固定","id":"components-layout-demo-bothfixed","tags":[],"filepath":"site/components/layout/demo/bothfixed.md","directory":"components/layout/demo","filename":"bothfixed","meta":{"title":"左右都固定","description":"\n","order":"2","filepath":"site/components/layout/demo/bothfixed.md","filename":"bothfixed","directory":"components/layout/demo","id":"components-layout-demo-bothfixed","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\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\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 Left = _uxcore.Layout.Left,\n Right = _uxcore.Layout.Right;\n;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Layout,\n { className: 'layoutDemo fixed' },\n React.createElement(\n Left,\n { width: 500, className: 'left' },\n '\\u5DE6'\n ),\n React.createElement(\n Right,\n { width: 500, className: 'right' },\n '\\u53F3'\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-layout-demo-bothfixed'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Layout } from 'uxcore';\nconst { Left, Right } = Layout;\nimport classnames from 'classnames';;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return (<div>\n <Layout className=\"layoutDemo fixed\">\n <Left width={500} className=\"left\">左</Left>\n <Right width={500} className=\"right\">右</Right>\n </Layout>\n </div>);\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-layout-demo-bothfixed'));</code></pre></div><style type=\"text/css\">.layoutDemo .left {\n text-align: center;\n line-height: 200px;\n font-size: 32px;\n background: lightblue;\n}\n.layoutDemo .right {\n text-align: center;\n line-height: 200px;\n font-size: 32px;\n background: yellowgreen;\n}\n.layoutDemo.fixed {\n min-width: 1000px;\n}\n.layoutDemo p {\n font-size: 24px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.layoutDemo .left {\n text-align: center;\n line-height: 200px;\n font-size: 32px;\n background: lightblue;\n}\n.layoutDemo .right {\n text-align: center;\n line-height: 200px;\n font-size: 32px;\n background: yellowgreen;\n}\n.layoutDemo.fixed {\n min-width: 1000px;\n}\n.layoutDemo p {\n font-size: 24px;\n}</code></pre></div>"},"status":"public","toc":""},{"title":"常见场景","id":"components-layout-demo-real","tags":[],"filepath":"site/components/layout/demo/real.md","directory":"components/layout/demo","filename":"real","meta":{"title":"常见场景","description":"\n","order":"3","filepath":"site/components/layout/demo/real.md","filename":"real","directory":"components/layout/demo","id":"components-layout-demo-real","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\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\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 Left = _uxcore.Layout.Left,\n Right = _uxcore.Layout.Right;\n\nvar SubMenu = _uxcore.Menu.SubMenu;\nvar InputFormField = _uxcore.Form.InputFormField,\n FormRow = _uxcore.Form.FormRow,\n OtherFormField = _uxcore.Form.OtherFormField,\n DateFormField = _uxcore.Form.DateFormField,\n CascadeSelectFormField = _uxcore.Form.CascadeSelectFormField,\n SelectFormField = _uxcore.Form.SelectFormField,\n CheckboxGroupFormField = _uxcore.Form.CheckboxGroupFormField;\n\nvar MenuItem = _uxcore.Menu.Item;\nvar Item = CheckboxGroupFormField.Item;\n;\n\nvar casData = {\n length: 2,\n contents: [{\n value: 'a',\n text: 'A',\n contents: [{\n value: 'ab',\n text: 'AB'\n }, {\n value: 'ac',\n text: 'AC'\n }]\n }, {\n value: 'b',\n text: 'B',\n contents: [{\n value: 'ba',\n text: 'BA'\n }, {\n value: 'bc',\n text: 'BC'\n }]\n }]\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: 'componentDidMount',\n value: function componentDidMount() {\n var me = this;\n $('.J_enter').on('keydown', function (e) {\n if (e.which == 13) {\n console.log(me.refs.form.getValues());\n }\n });\n }\n }, {\n key: 'componentWillUnmount',\n value: function componentWillUnmount() {\n $('.J_enter').off('keydown');\n }\n }, {\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: 'handleSearchClick',\n value: function handleSearchClick() {\n var me = this;\n me.setState({\n showAdSearch: !me.state.showAdSearch\n });\n }\n }, {\n key: 'handleSubmitClick',\n value: function handleSubmitClick() {\n var me = this;\n console.log(me.refs.form.getValues());\n }\n }, {\n key: 'handleResetClick',\n value: function handleResetClick() {\n var me = this;\n me.refs.form.resetValues();\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n var columns = [{ dataKey: 'country', title: '国家', width: 200, ordered: true }, { dataKey: 'city', title: '城市', width: 150, ordered: true }, { dataKey: 'firstName', title: 'FristName' }, { dataKey: 'lastName', title: 'LastName' }, { dataKey: 'action1',\n title: '操作',\n width: 100,\n type: 'action',\n actions: {\n 编辑: function _(rowData, actions) {\n console.log(actions.addEmptyRow);\n me.refs.grid.toggleSubComp(rowData);\n },\n 删除: function _(rowData) {\n me.refs.grid.delRow(rowData);\n }\n }\n }, { dataKey: 'action',\n title: '链接',\n width: 100,\n render: function render(rowData) {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'a',\n { href: '#' },\n '111'\n )\n );\n }\n }];\n var renderProps = {\n actionColumn: {\n edit: function edit() {},\n del: function del() {}\n },\n fetchParams: {},\n showColumnPicker: false,\n fetchUrl: './demo/data.json',\n jsxcolumns: columns\n };\n return React.createElement(\n _uxcore.Layout,\n { className: 'demo4' },\n React.createElement(\n Left,\n { width: 190 },\n React.createElement(\n _uxcore.Menu,\n { onClick: this.handleClick.bind(this),\n style: { width: 190 },\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 React.createElement(\n Right,\n { adaptive: true, className: 'demo4-right' },\n React.createElement(\n 'div',\n { className: 'demo4-right' },\n React.createElement(\n _uxcore.Form,\n { ref: 'form' },\n React.createElement(\n FormRow,\n null,\n React.createElement(InputFormField, { className: 'J_enter', jsxplaceholder: '\\u8F93\\u5165 xxxx \\u8FDB\\u884C\\u67E5\\u8BE2', jsxshowLabel: false, jsxname: 'search' }),\n React.createElement(\n OtherFormField,\n { jsxflex: 2 },\n React.createElement(\n 'div',\n { className: 'demo-updown', onClick: me.handleSearchClick.bind(me) },\n React.createElement(\n 'a',\n { href: 'javascript:;' },\n '\\u9AD8\\u7EA7\\u67E5\\u8BE2'\n ),\n React.createElement('i', { className: (0, _classnames2.default)({\n 'kuma-icon': true,\n 'kuma-icon-title-up': me.state.showAdSearch,\n 'kuma-icon-title-down': !me.state.showAdSearch\n })\n })\n )\n )\n ),\n React.createElement(\n FormRow,\n { className: (0, _classnames2.default)({\n 'f-dn': !me.state.showAdSearch\n })\n },\n React.createElement(InputFormField, { jsxlabel: '\\u540D\\u79F0', jsxname: 'input1', className: 'input1' }),\n React.createElement(DateFormField, { jsxlabel: '\\u540D\\u79F0', jsxname: 'date1', jsxtype: 'cascade', style: {\n width: 100\n }\n })\n ),\n React.createElement(\n FormRow,\n { className: (0, _classnames2.default)({\n 'f-dn': !me.state.showAdSearch\n })\n },\n React.createElement(SelectFormField, { className: 'select2',\n jsxfetchUrl: 'http://suggest.taobao.com/sug',\n jsxmultiple: true,\n jsxname: 'select2',\n jsxlabel: '\\u540D\\u79F0',\n afterFetch: function afterFetch(obj) {\n var data = {};\n obj.result.forEach(function (item, index) {\n data[item[1]] = item[0];\n });\n console.log(data);\n return data;\n }\n }),\n React.createElement(\n CheckboxGroupFormField,\n { jsxlabel: '\\u540D\\u79F0', jsxname: 'check1' },\n React.createElement(Item, { value: '1', text: '\\u540D\\u79F0' }),\n React.createElement(Item, { value: '2', text: '\\u540D\\u79F0' }),\n React.createElement(Item, { value: '3', text: '\\u540D\\u79F0' })\n )\n ),\n React.createElement(\n FormRow,\n { className: (0, _classnames2.default)({\n 'f-dn': !me.state.showAdSearch\n })\n },\n React.createElement(\n OtherFormField,\n { className: 'button1' },\n React.createElement(\n _uxcore.Button,\n { type: 'primary', onClick: me.handleSubmitClick.bind(me) },\n '\\u63D0\\u4EA4'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'secondary', onClick: me.handleResetClick.bind(me) },\n '\\u91CD\\u7F6E'\n )\n )\n )\n ),\n React.createElement(_uxcore.Table, renderProps)\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-layout-demo-real'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Layout } from 'uxcore';\nimport { Menu } from 'uxcore';\nimport { Form } from 'uxcore';\nimport { Button } from 'uxcore';\nimport { Table } from 'uxcore';\nconst { Left, Right } = Layout;\nconst SubMenu = Menu.SubMenu;\nconst {\n InputFormField,\n FormRow,\n OtherFormField,\n DateFormField,\n CascadeSelectFormField,\n SelectFormField,\n CheckboxGroupFormField,\n} = Form;\nconst MenuItem = Menu.Item;\nconst Item = CheckboxGroupFormField.Item;\nimport classnames from 'classnames';;\n\nconst casData = {\n length: 2,\n contents: [\n {\n value: 'a',\n text: 'A',\n contents: [\n {\n value: 'ab',\n text: 'AB',\n },\n {\n value: 'ac',\n text: 'AC',\n },\n ],\n },\n {\n value: 'b',\n text: 'B',\n contents: [\n {\n value: 'ba',\n text: 'BA',\n },\n {\n value: 'bc',\n text: 'BC',\n },\n ],\n },\n ],\n};\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n current: '1',\n };\n }\n\n componentDidMount() {\n const me = this;\n $('.J_enter').on('keydown', (e) => {\n if (e.which == 13) {\n console.log(me.refs.form.getValues());\n }\n });\n }\n\n componentWillUnmount() {\n $('.J_enter').off('keydown');\n }\n\n handleClick(e) {\n console.log('click ', e);\n this.setState({\n current: e.key,\n });\n }\n\n handleSearchClick() {\n const me = this;\n me.setState({\n showAdSearch: !me.state.showAdSearch,\n });\n }\n\n handleSubmitClick() {\n const me = this;\n console.log(me.refs.form.getValues());\n }\n\n handleResetClick() {\n const me = this;\n me.refs.form.resetValues();\n }\n\n render() {\n const me = this;\n const columns = [\n { dataKey: 'country', title: '国家', width: 200, ordered: true },\n { dataKey: 'city', title: '城市', width: 150, ordered: true },\n { dataKey: 'firstName', title: 'FristName' },\n { dataKey: 'lastName', title: 'LastName' },\n { dataKey: 'action1',\n title: '操作',\n width: 100,\n type: 'action',\n actions: {\n 编辑(rowData, actions) {\n console.log(actions.addEmptyRow);\n me.refs.grid.toggleSubComp(rowData);\n },\n 删除(rowData) {\n me.refs.grid.delRow(rowData);\n },\n },\n },\n { dataKey: 'action',\n title: '链接',\n width: 100,\n render(rowData) {\n return <div><a href=\"#\">111</a></div>;\n },\n },\n ];\n const renderProps = {\n actionColumn: {\n edit() {},\n del() {},\n },\n fetchParams: {},\n showColumnPicker: false,\n fetchUrl: './demo/data.json',\n jsxcolumns: columns,\n };\n return (\n <Layout className=\"demo4\">\n <Left width={190}>\n <Menu onClick={this.handleClick.bind(this)}\n style={{ width: 190 }}\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 </Left>\n <Right adaptive className=\"demo4-right\">\n <div className=\"demo4-right\">\n <Form ref=\"form\">\n <FormRow>\n <InputFormField className=\"J_enter\" jsxplaceholder=\"输入 xxxx 进行查询\" jsxshowLabel={false} jsxname=\"search\" />\n <OtherFormField jsxflex={2}>\n <div className=\"demo-updown\" onClick={me.handleSearchClick.bind(me)}>\n <a href=\"javascript:;\">高级查询</a><i className={classnames({\n 'kuma-icon': true,\n 'kuma-icon-title-up': me.state.showAdSearch,\n 'kuma-icon-title-down': !me.state.showAdSearch,\n })}\n />\n </div>\n </OtherFormField>\n </FormRow>\n <FormRow className={classnames({\n 'f-dn': !me.state.showAdSearch,\n })}\n >\n <InputFormField jsxlabel=\"名称\" jsxname=\"input1\" className=\"input1\" />\n <DateFormField jsxlabel=\"名称\" jsxname=\"date1\" jsxtype=\"cascade\" style={{\n width: 100,\n }}\n />\n </FormRow>\n <FormRow className={classnames({\n 'f-dn': !me.state.showAdSearch,\n })}\n >\n <SelectFormField className=\"select2\"\n jsxfetchUrl=\"http://suggest.taobao.com/sug\"\n jsxmultiple\n jsxname=\"select2\"\n jsxlabel=\"名称\"\n afterFetch={(obj) => {\n const data = {};\n obj.result.forEach((item, index) => {\n data[item[1]] = item[0];\n });\n console.log(data);\n return data;\n }}\n />\n <CheckboxGroupFormField jsxlabel=\"名称\" jsxname=\"check1\">\n <Item value=\"1\" text=\"名称\" />\n <Item value=\"2\" text=\"名称\" />\n <Item value=\"3\" text=\"名称\" />\n </CheckboxGroupFormField>\n </FormRow>\n <FormRow className={classnames({\n 'f-dn': !me.state.showAdSearch,\n })}\n >\n <OtherFormField className=\"button1\">\n <Button type=\"primary\" onClick={me.handleSubmitClick.bind(me)}>提交</Button>\n <Button type=\"secondary\" onClick={me.handleResetClick.bind(me)}>重置</Button>\n </OtherFormField>\n </FormRow>\n </Form>\n <Table {...renderProps} />\n </div>\n </Right>\n </Layout>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-layout-demo-real'));</code></pre></div><style type=\"text/css\">.demo4 {\n min-height: 600px;\n}\n.demo4 .f-dn {\n display: none;\n}\n.demo4 .demo-updown {\n line-height: 36px;\n display: inline-block;\n}\n.demo4 .kuma-button {\n margin-right: 20px;\n}\n.demo4 .kuma-label {\n width: 70px;\n}\n.demo4 .kuma-calendar-picker {\n width: 150px;\n}\n.demo4 .demo4-right {\n padding-left: 20px;\n}\n.demo4 .input1 .kuma-label, .demo4 .select2 .kuma-label {\n width: 48px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.demo4 {\n min-height: 600px;\n}\n.demo4 .f-dn {\n display: none;\n}\n.demo4 .demo-updown {\n line-height: 36px;\n display: inline-block;\n}\n.demo4 .kuma-button {\n margin-right: 20px;\n}\n.demo4 .kuma-label {\n width: 70px;\n}\n.demo4 .kuma-calendar-picker {\n width: 150px;\n}\n.demo4 .demo4-right {\n padding-left: 20px;\n}\n.demo4 .input1 .kuma-label, .demo4 .select2 .kuma-label {\n width: 48px;\n}</code></pre></div>"},"status":"public","toc":""}]

左侧自适应，右侧固定

右侧定宽 190 px，左侧自适应

import { Layout } from 'uxcore';
const { Left, Right } = Layout;
import classnames from 'classnames';;

class Demo extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (<div>
      <Layout className="layoutDemo">
        <Left adaptive className="left">左</Left>
        <Right width={190} className="right">右</Right>
      </Layout>
    </div>);
  }
}

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

.layoutDemo .left {
  text-align: center;
  line-height: 200px;
  font-size: 32px;
  background: lightblue;
}
.layoutDemo .right {
  text-align: center;
  line-height: 200px;
  font-size: 32px;
  background: yellowgreen;
}
.layoutDemo.fixed {
  min-width: 1000px;
}
.layoutDemo p {
  font-size: 24px;
}

右侧自适应，左侧固定

左侧定宽 190 px，右侧自适应

import { Layout } from 'uxcore';
const { Left, Right } = Layout;
import classnames from 'classnames';;

class Demo extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (<div>
      <Layout className="layoutDemo">
        <Left width={190} className="left">左</Left>
        <Right adaptive className="right">右</Right>
      </Layout>
    </div>);
  }
}

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

.layoutDemo .left {
  text-align: center;
  line-height: 200px;
  font-size: 32px;
  background: lightblue;
}
.layoutDemo .right {
  text-align: center;
  line-height: 200px;
  font-size: 32px;
  background: yellowgreen;
}
.layoutDemo.fixed {
  min-width: 1000px;
}
.layoutDemo p {
  font-size: 24px;
}

左右都固定

import { Layout } from 'uxcore';
const { Left, Right } = Layout;
import classnames from 'classnames';;

class Demo extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (<div>
      <Layout className="layoutDemo fixed">
        <Left width={500} className="left">左</Left>
        <Right width={500} className="right">右</Right>
      </Layout>
    </div>);
  }
}

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

.layoutDemo .left {
  text-align: center;
  line-height: 200px;
  font-size: 32px;
  background: lightblue;
}
.layoutDemo .right {
  text-align: center;
  line-height: 200px;
  font-size: 32px;
  background: yellowgreen;
}
.layoutDemo.fixed {
  min-width: 1000px;
}
.layoutDemo p {
  font-size: 24px;
}

常见场景

import { Layout } from 'uxcore';
import { Menu } from 'uxcore';
import { Form } from 'uxcore';
import { Button } from 'uxcore';
import { Table } from 'uxcore';
const { Left, Right } = Layout;
const SubMenu = Menu.SubMenu;
const {
    InputFormField,
    FormRow,
    OtherFormField,
    DateFormField,
    CascadeSelectFormField,
    SelectFormField,
    CheckboxGroupFormField,
} = Form;
const MenuItem = Menu.Item;
const Item = CheckboxGroupFormField.Item;
import classnames from 'classnames';;

const casData = {
  length: 2,
  contents: [
    {
      value: 'a',
      text: 'A',
      contents: [
        {
          value: 'ab',
          text: 'AB',
        },
        {
          value: 'ac',
          text: 'AC',
        },
      ],
    },
    {
      value: 'b',
      text: 'B',
      contents: [
        {
          value: 'ba',
          text: 'BA',
        },
        {
          value: 'bc',
          text: 'BC',
        },
      ],
    },
  ],
};

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: '1',
    };
  }

  componentDidMount() {
    const me = this;
    $('.J_enter').on('keydown', (e) => {
      if (e.which == 13) {
        console.log(me.refs.form.getValues());
      }
    });
  }

  componentWillUnmount() {
    $('.J_enter').off('keydown');
  }

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

  handleSearchClick() {
    const me = this;
    me.setState({
      showAdSearch: !me.state.showAdSearch,
    });
  }

  handleSubmitClick() {
    const me = this;
    console.log(me.refs.form.getValues());
  }

  handleResetClick() {
    const me = this;
    me.refs.form.resetValues();
  }

  render() {
    const me = this;
    const columns = [
            { dataKey: 'country', title: '国家', width: 200, ordered: true },
            { dataKey: 'city', title: '城市', width: 150, ordered: true },
            { dataKey: 'firstName', title: 'FristName' },
            { dataKey: 'lastName', title: 'LastName' },
      { dataKey: 'action1',
        title: '操作',
        width: 100,
        type: 'action',
        actions: {
          编辑(rowData, actions) {
            console.log(actions.addEmptyRow);
            me.refs.grid.toggleSubComp(rowData);
          },
          删除(rowData) {
            me.refs.grid.delRow(rowData);
          },
        },
      },
      { dataKey: 'action',
        title: '链接',
        width: 100,
        render(rowData) {
          return <div><a href="#">111</a></div>;
        },
      },
    ];
    const renderProps = {
      actionColumn: {
        edit() {},
        del() {},
      },
      fetchParams: {},
      showColumnPicker: false,
      fetchUrl: './demo/data.json',
      jsxcolumns: columns,
    };
    return (
      <Layout className="demo4">
        <Left width={190}>
          <Menu onClick={this.handleClick.bind(this)}
            style={{ width: 190 }}
            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>
        </Left>
        <Right adaptive className="demo4-right">
          <div className="demo4-right">
            <Form ref="form">
              <FormRow>
                <InputFormField className="J_enter" jsxplaceholder="输入 xxxx 进行查询" jsxshowLabel={false} jsxname="search" />
                <OtherFormField jsxflex={2}>
                  <div className="demo-updown" onClick={me.handleSearchClick.bind(me)}>
                    <a href="javascript:;">高级查询</a><i className={classnames({
                      'kuma-icon': true,
                      'kuma-icon-title-up': me.state.showAdSearch,
                      'kuma-icon-title-down': !me.state.showAdSearch,
                    })}
                    />
                  </div>
                </OtherFormField>
              </FormRow>
              <FormRow className={classnames({
                'f-dn': !me.state.showAdSearch,
              })}
              >
                <InputFormField jsxlabel="名称" jsxname="input1" className="input1" />
                <DateFormField jsxlabel="名称" jsxname="date1" jsxtype="cascade" style={{
                  width: 100,
                }}
                />
              </FormRow>
              <FormRow className={classnames({
                'f-dn': !me.state.showAdSearch,
              })}
              >
                <SelectFormField className="select2"
                  jsxfetchUrl="http://suggest.taobao.com/sug"
                  jsxmultiple
                  jsxname="select2"
                  jsxlabel="名称"
                  afterFetch={(obj) => {
                    const data = {};
                    obj.result.forEach((item, index) => {
                      data[item[1]] = item[0];
                    });
                    console.log(data);
                    return data;
                  }}
                />
                <CheckboxGroupFormField jsxlabel="名称" jsxname="check1">
                  <Item value="1" text="名称" />
                  <Item value="2" text="名称" />
                  <Item value="3" text="名称" />
                </CheckboxGroupFormField>
              </FormRow>
              <FormRow className={classnames({
                'f-dn': !me.state.showAdSearch,
              })}
              >
                <OtherFormField className="button1">
                  <Button type="primary" onClick={me.handleSubmitClick.bind(me)}>提交</Button>
                  <Button type="secondary" onClick={me.handleResetClick.bind(me)}>重置</Button>
                </OtherFormField>
              </FormRow>
            </Form>
            <Table {...renderProps} />
          </div>
        </Right>
      </Layout>
    );
  }
}

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

.demo4 {
  min-height: 600px;
}
.demo4 .f-dn {
  display: none;
}
.demo4 .demo-updown {
  line-height: 36px;
  display: inline-block;
}
.demo4 .kuma-button {
  margin-right: 20px;
}
.demo4 .kuma-label {
  width: 70px;
}
.demo4 .kuma-calendar-picker {
    width: 150px;
}
.demo4 .demo4-right {
    padding-left: 20px;
}
.demo4 .input1 .kuma-label, .demo4 .select2 .kuma-label {
    width: 48px;
}

Props

配置项	类型	必填	默认值	功能/备注
className	string	optional	""	加入额外的类名，在使用 kuma 的基础上进行适当的定制时会用得到

子组件

Left/Right

配置项	类型	必填	默认值	功能/备注
className	string	optional	""	加入额外的类名，在使用 kuma 的基础上进行适当的定制时会用得到
width	number	optional	500	布局块的宽度，仅在定宽时起作用
adaptive	boolean	optional	false	是否为自适应，未设定 adaptive=true 的一侧，则为定宽，不可两者皆为自适应