组件演示

[{"title":"基本使用","id":"components-collapse-demo-basic","tags":[],"filepath":"site/components/collapse/demo/basic.md","directory":"components/collapse/demo","filename":"basic","meta":{"title":"基本使用","description":"\n<p>可以同时展开多个面板,这个例子默认展开了第一个。</p>\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\"><span class=\"hljs-keyword\">import</span> Collapse, { Panel } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-collapse'</span>;\n\n<span class=\"hljs-keyword\">const</span> text = <span class=\"hljs-string\">`\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`</span>;\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 handleChange(key) {\n <span class=\"hljs-built_in\">console</span>.log(key);\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">padding:</span> '<span class=\"hljs-attribute\">20px</span>' }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Collapse</span> <span class=\"hljs-attribute\">defaultActiveKey</span>=<span class=\"hljs-value\">{['1']}</span> <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{this.handleChange}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Panel</span> <span class=\"hljs-attribute\">header</span>=<span class=\"hljs-value\">{'This</span> <span class=\"hljs-attribute\">is</span> <span class=\"hljs-attribute\">panel</span> <span class=\"hljs-attribute\">header</span> <span class=\"hljs-attribute\">1</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\">p</span>&gt;</span>{text}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Panel</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Panel</span> <span class=\"hljs-attribute\">header</span>=<span class=\"hljs-value\">{'This</span> <span class=\"hljs-attribute\">is</span> <span class=\"hljs-attribute\">panel</span> <span class=\"hljs-attribute\">header</span> <span class=\"hljs-attribute\">2</span>'} <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">\"2\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>{text}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Panel</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Panel</span> <span class=\"hljs-attribute\">header</span>=<span class=\"hljs-value\">{'This</span> <span class=\"hljs-attribute\">is</span> <span class=\"hljs-attribute\">panel</span> <span class=\"hljs-attribute\">header</span> <span class=\"hljs-attribute\">3</span>'} <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">\"3\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>{text}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Panel</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Collapse</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>, document.getElementById('components-collapse-demo-basic'));</span></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<p>手风琴,每次只打开一个tab。默认打开第一个。</p>\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\"><span class=\"hljs-keyword\">import</span> Collapse, { Panel } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-collapse'</span>;\n\n<span class=\"hljs-keyword\">const</span> text = <span class=\"hljs-string\">`\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`</span>;\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 handleChange(key) {\n <span class=\"hljs-built_in\">console</span>.log(key);\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">padding:</span> '<span class=\"hljs-attribute\">20px</span>' }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Collapse</span> <span class=\"hljs-attribute\">accordion</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Panel</span> <span class=\"hljs-attribute\">header</span>=<span class=\"hljs-value\">{'This</span> <span class=\"hljs-attribute\">is</span> <span class=\"hljs-attribute\">panel</span> <span class=\"hljs-attribute\">header</span> <span class=\"hljs-attribute\">1</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\">p</span>&gt;</span>{text}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Panel</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Panel</span> <span class=\"hljs-attribute\">header</span>=<span class=\"hljs-value\">{'This</span> <span class=\"hljs-attribute\">is</span> <span class=\"hljs-attribute\">panel</span> <span class=\"hljs-attribute\">header</span> <span class=\"hljs-attribute\">2</span>'} <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">\"2\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>{text}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Panel</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Panel</span> <span class=\"hljs-attribute\">header</span>=<span class=\"hljs-value\">{'This</span> <span class=\"hljs-attribute\">is</span> <span class=\"hljs-attribute\">panel</span> <span class=\"hljs-attribute\">header</span> <span class=\"hljs-attribute\">3</span>'} <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">\"3\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>{text}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Panel</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Collapse</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>, document.getElementById('components-collapse-demo-accordion'));</span></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<p>手风琴嵌套折叠面板</p>\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\"><span class=\"hljs-keyword\">import</span> Collapse, { Panel } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-collapse'</span>;\n\n<span class=\"hljs-keyword\">const</span> text = <span class=\"hljs-string\">`\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`</span>;\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 handleChange(key) {\n <span class=\"hljs-built_in\">console</span>.log(key);\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">padding:</span> '<span class=\"hljs-attribute\">20px</span>' }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Collapse</span> <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{this.handleChange}</span> <span class=\"hljs-attribute\">accordion</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Panel</span> <span class=\"hljs-attribute\">header</span>=<span class=\"hljs-value\">{'This</span> <span class=\"hljs-attribute\">is</span> <span class=\"hljs-attribute\">panel</span> <span class=\"hljs-attribute\">header</span> <span class=\"hljs-attribute\">1</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\">Collapse</span> <span class=\"hljs-attribute\">defaultActiveKey</span>=<span class=\"hljs-value\">\"1\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Panel</span> <span class=\"hljs-attribute\">header</span>=<span class=\"hljs-value\">{'This</span> <span class=\"hljs-attribute\">is</span> <span class=\"hljs-attribute\">panel</span> <span class=\"hljs-attribute\">nest</span> <span class=\"hljs-attribute\">panel</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\">p</span>&gt;</span>{text}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Panel</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Collapse</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Panel</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Panel</span> <span class=\"hljs-attribute\">header</span>=<span class=\"hljs-value\">{'This</span> <span class=\"hljs-attribute\">is</span> <span class=\"hljs-attribute\">panel</span> <span class=\"hljs-attribute\">header</span> <span class=\"hljs-attribute\">2</span>'} <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">\"2\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>{text}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Panel</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Panel</span> <span class=\"hljs-attribute\">header</span>=<span class=\"hljs-value\">{'This</span> <span class=\"hljs-attribute\">is</span> <span class=\"hljs-attribute\">panel</span> <span class=\"hljs-attribute\">header</span> <span class=\"hljs-attribute\">3</span>'} <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">\"3\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>{text}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Panel</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Collapse</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>, document.getElementById('components-collapse-demo-nest'));</span></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)=>{} 面板头点击事件