uxcore.js - React UI Component Set

组件演示

[{"title":"基本使用","id":"components-collapse-demo-basic","tags":[],"filepath":"site/components/collapse/demo/basic.md","directory":"components/collapse/demo","filename":"basic","meta":{"title":"基本使用","description":"\n可以同时展开多个面板，这个例子默认展开了第一个。\n","order":"0","filepath":"site/components/collapse/demo/basic.md","filename":"basic","directory":"components/collapse/demo","id":"components-collapse-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 _uxcoreCollapse = require('uxcore-collapse');\n\nvar _uxcoreCollapse2 = _interopRequireDefault(_uxcoreCollapse);\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 text = '\\n A dog is a type of domesticated animal.\\n Known for its loyalty and faithfulness,\\n it can be found as a welcome guest in many households across the world.\\n';\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(key) {\n console.log(key);\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { style: { padding: '20px' } },\n React.createElement(\n _uxcoreCollapse2.default,\n { defaultActiveKey: ['1'], onChange: this.handleChange },\n React.createElement(\n _uxcoreCollapse.Panel,\n { header: 'This is panel header 1', key: '1' },\n React.createElement(\n 'p',\n null,\n text\n )\n ),\n React.createElement(\n _uxcoreCollapse.Panel,\n { header: 'This is panel header 2', key: '2' },\n React.createElement(\n 'p',\n null,\n text\n )\n ),\n React.createElement(\n _uxcoreCollapse.Panel,\n { header: 'This is panel header 3', key: '3' },\n React.createElement(\n 'p',\n null,\n text\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-collapse-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import Collapse, { Panel } from 'uxcore-collapse';\n\nconst text = `\n A dog is a type of domesticated animal.\n Known for its loyalty and faithfulness,\n it can be found as a welcome guest in many households across the world.\n`;\n\nclass Demo extends React.Component {\n handleChange(key) {\n console.log(key);\n }\n\n render() {\n return (\n <div style={{ padding: '20px' }}>\n <Collapse defaultActiveKey={['1']} onChange={this.handleChange}>\n <Panel header={'This is panel header 1'} key=\"1\">\n <p>{text}</p>\n </Panel>\n <Panel header={'This is panel header 2'} key=\"2\">\n <p>{text}</p>\n </Panel>\n <Panel header={'This is panel header 3'} key=\"3\">\n <p>{text}</p>\n </Panel>\n </Collapse>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-collapse-demo-basic'));</code></pre></div>"},"status":"public","toc":""},{"title":"手风琴模式","id":"components-collapse-demo-accordion","tags":[],"filepath":"site/components/collapse/demo/accordion.md","directory":"components/collapse/demo","filename":"accordion","meta":{"title":"手风琴模式","description":"\n手风琴，每次只打开一个tab。默认打开第一个。\n","order":"1","filepath":"site/components/collapse/demo/accordion.md","filename":"accordion","directory":"components/collapse/demo","id":"components-collapse-demo-accordion","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 _uxcoreCollapse = require('uxcore-collapse');\n\nvar _uxcoreCollapse2 = _interopRequireDefault(_uxcoreCollapse);\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 text = '\\n A dog is a type of domesticated animal.\\n Known for its loyalty and faithfulness,\\n it can be found as a welcome guest in many households across the world.\\n';\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(key) {\n console.log(key);\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { style: { padding: '20px' } },\n React.createElement(\n _uxcoreCollapse2.default,\n { accordion: true },\n React.createElement(\n _uxcoreCollapse.Panel,\n { header: 'This is panel header 1', key: '1' },\n React.createElement(\n 'p',\n null,\n text\n )\n ),\n React.createElement(\n _uxcoreCollapse.Panel,\n { header: 'This is panel header 2', key: '2' },\n React.createElement(\n 'p',\n null,\n text\n )\n ),\n React.createElement(\n _uxcoreCollapse.Panel,\n { header: 'This is panel header 3', key: '3' },\n React.createElement(\n 'p',\n null,\n text\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-collapse-demo-accordion'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import Collapse, { Panel } from 'uxcore-collapse';\n\nconst text = `\n A dog is a type of domesticated animal.\n Known for its loyalty and faithfulness,\n it can be found as a welcome guest in many households across the world.\n`;\n\nclass Demo extends React.Component {\n handleChange(key) {\n console.log(key);\n }\n\n render() {\n return (\n <div style={{ padding: '20px' }}>\n <Collapse accordion>\n <Panel header={'This is panel header 1'} key=\"1\">\n <p>{text}</p>\n </Panel>\n <Panel header={'This is panel header 2'} key=\"2\">\n <p>{text}</p>\n </Panel>\n <Panel header={'This is panel header 3'} key=\"3\">\n <p>{text}</p>\n </Panel>\n </Collapse>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-collapse-demo-accordion'));</code></pre></div>"},"status":"public","toc":""},{"title":"嵌套","id":"components-collapse-demo-nest","tags":[],"filepath":"site/components/collapse/demo/nest.md","directory":"components/collapse/demo","filename":"nest","meta":{"title":"嵌套","description":"\n手风琴嵌套折叠面板\n","order":"2","filepath":"site/components/collapse/demo/nest.md","filename":"nest","directory":"components/collapse/demo","id":"components-collapse-demo-nest","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 _uxcoreCollapse = require('uxcore-collapse');\n\nvar _uxcoreCollapse2 = _interopRequireDefault(_uxcoreCollapse);\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 text = '\\n A dog is a type of domesticated animal.\\n Known for its loyalty and faithfulness,\\n it can be found as a welcome guest in many households across the world.\\n';\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(key) {\n console.log(key);\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { style: { padding: '20px' } },\n React.createElement(\n _uxcoreCollapse2.default,\n { onChange: this.handleChange, accordion: true },\n React.createElement(\n _uxcoreCollapse.Panel,\n { header: 'This is panel header 1', key: '1' },\n React.createElement(\n _uxcoreCollapse2.default,\n { defaultActiveKey: '1' },\n React.createElement(\n _uxcoreCollapse.Panel,\n { header: 'This is panel nest panel', key: '1' },\n React.createElement(\n 'p',\n null,\n text\n )\n )\n )\n ),\n React.createElement(\n _uxcoreCollapse.Panel,\n { header: 'This is panel header 2', key: '2' },\n React.createElement(\n 'p',\n null,\n text\n )\n ),\n React.createElement(\n _uxcoreCollapse.Panel,\n { header: 'This is panel header 3', key: '3' },\n React.createElement(\n 'p',\n null,\n text\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-collapse-demo-nest'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import Collapse, { Panel } from 'uxcore-collapse';\n\nconst text = `\n A dog is a type of domesticated animal.\n Known for its loyalty and faithfulness,\n it can be found as a welcome guest in many households across the world.\n`;\n\nclass Demo extends React.Component {\n handleChange(key) {\n console.log(key);\n }\n\n render() {\n return (\n <div style={{ padding: '20px' }}>\n <Collapse onChange={this.handleChange} accordion>\n <Panel header={'This is panel header 1'} key=\"1\">\n <Collapse defaultActiveKey=\"1\">\n <Panel header={'This is panel nest panel'} key=\"1\">\n <p>{text}</p>\n </Panel>\n </Collapse>\n </Panel>\n <Panel header={'This is panel header 2'} key=\"2\">\n <p>{text}</p>\n </Panel>\n <Panel header={'This is panel header 3'} key=\"3\">\n <p>{text}</p>\n </Panel>\n </Collapse>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-collapse-demo-nest'));</code></pre></div>"},"status":"public","toc":""}]

基本使用

可以同时展开多个面板，这个例子默认展开了第一个。

import Collapse, { Panel } from 'uxcore-collapse';

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

class Demo extends React.Component {
  handleChange(key) {
    console.log(key);
  }

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <Collapse defaultActiveKey={['1']} onChange={this.handleChange}>
          <Panel header={'This is panel header 1'} key="1">
            <p>{text}</p>
          </Panel>
          <Panel header={'This is panel header 2'} key="2">
            <p>{text}</p>
          </Panel>
          <Panel header={'This is panel header 3'} key="3">
            <p>{text}</p>
          </Panel>
        </Collapse>
      </div>
    );
  }
}

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

手风琴模式

手风琴，每次只打开一个tab。默认打开第一个。

import Collapse, { Panel } from 'uxcore-collapse';

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

class Demo extends React.Component {
  handleChange(key) {
    console.log(key);
  }

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <Collapse accordion>
          <Panel header={'This is panel header 1'} key="1">
            <p>{text}</p>
          </Panel>
          <Panel header={'This is panel header 2'} key="2">
            <p>{text}</p>
          </Panel>
          <Panel header={'This is panel header 3'} key="3">
            <p>{text}</p>
          </Panel>
        </Collapse>
      </div>
    );
  }
}

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

嵌套

手风琴嵌套折叠面板

import Collapse, { Panel } from 'uxcore-collapse';

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

class Demo extends React.Component {
  handleChange(key) {
    console.log(key);
  }

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <Collapse onChange={this.handleChange} accordion>
          <Panel header={'This is panel header 1'} key="1">
            <Collapse defaultActiveKey="1">
              <Panel header={'This is panel nest panel'} key="1">
                <p>{text}</p>
              </Panel>
            </Collapse>
          </Panel>
          <Panel header={'This is panel header 2'} key="2">
            <p>{text}</p>
          </Panel>
          <Panel header={'This is panel header 3'} key="3">
            <p>{text}</p>
          </Panel>
        </Collapse>
      </div>
    );
  }
}

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

可以折叠/展开的内容区域。

Props

Collapse

配置项	类型	必填	默认值	功能/备注
prefixCls	string	optional	`kuma-collapse`	默认类名，用户可以通过修改此项来完成样式的定制
activeKey	array/string	optional	the first panel key	当前激活面板的 key 默认无，accordion模式下默认第一个元素
defaultActiveKey	array/string	optional	`null`	初始化选中面板的 key
accordion	bool	optional	`false`	手风琴模式
onChange	function	optional	`(key)=>{}`	切换面板的回调

Collapse.Panel

配置项	类型	必填	默认值	功能/备注
key	string	optional	index	当前面板的 key
prefixCls	string	optional	Collapse.prefixCls	默认类名，用户可以通过修改此项来完成样式的定制
header	string/number/node	optional	`null`	面板头内容
isActive	bool	optional	false	面板当前是否展开,true 表示展开
onItemClick	function	optional	`(isActive, e)=>{}`	面板头点击事件