uxcore.js - React UI Component Set

组件演示

[{"title":"基本使用","id":"components-carousel-demo-basic","tags":[],"filepath":"site/components/carousel/demo/basic.md","directory":"components/carousel/demo","filename":"basic","meta":{"title":"基本使用","description":"\n","order":"0","filepath":"site/components/carousel/demo/basic.md","filename":"basic","directory":"components/carousel/demo","id":"components-carousel-demo-basic","template":"demos","html":"<style type=\"text/css\">.demo {\n width: 400px;\n height: 225px;\n}\n\n.code-box {\n width: 100%;\n}\n\n/* CSS END JS START*/\n</style><div class=\"highlight\"><pre><code class=\"css\">.demo {\n width: 400px;\n height: 225px;\n}\n\n.code-box {\n width: 100%;\n}\n\n/* CSS END JS START*/\n</code></pre></div><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 _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\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\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 return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { style: { width: 1000 } },\n React.createElement(\n _uxcore.Carousel,\n { className: 'demo', autoplay: true, pauseOnHover: true },\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg', style: { width: '100%' } })\n ),\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg', style: { width: '100%' } })\n ),\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg', style: { width: '100%' } })\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-carousel-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';;\n\nimport { Carousel } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n return (\n <div style={{ width: 1000 }}>\n <Carousel className=\"demo\" autoplay pauseOnHover>\n <div><img src=\"https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg\" style={{ width: '100%' }} /></div>\n <div><img src=\"https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg\" style={{ width: '100%' }} /></div>\n <div><img src=\"https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg\" style={{ width: '100%' }} /></div>\n </Carousel>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-carousel-demo-basic'));\n</code></pre></div>"},"status":"public","toc":""},{"title":"淡入淡出","id":"components-carousel-demo-fade","tags":[],"filepath":"site/components/carousel/demo/fade.md","directory":"components/carousel/demo","filename":"fade","meta":{"title":"淡入淡出","description":"\nfade 为 true 时，切换效果为淡入淡出\n","order":"1","filepath":"site/components/carousel/demo/fade.md","filename":"fade","directory":"components/carousel/demo","id":"components-carousel-demo-fade","template":"demos","html":"<style type=\"text/css\">.demo {\n width: 400px;\n height: 225px;\n}\n\n.code-box {\n width: 100%;\n}\n\n/* CSS END JS START*/\n</style><div class=\"highlight\"><pre><code class=\"css\">.demo {\n width: 400px;\n height: 225px;\n}\n\n.code-box {\n width: 100%;\n}\n\n/* CSS END JS START*/\n</code></pre></div><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 _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\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\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 return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { style: { width: 1000 } },\n React.createElement(\n _uxcore.Carousel,\n { className: 'demo', autoplay: true, pauseOnHover: true, fade: true },\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg', style: { width: '100%' } })\n ),\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg', style: { width: '100%' } })\n ),\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg', style: { width: '100%' } })\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-carousel-demo-fade'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';;\n\nimport { Carousel } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n return (\n <div style={{ width: 1000 }}>\n <Carousel className=\"demo\" autoplay pauseOnHover fade>\n <div><img src=\"https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg\" style={{ width: '100%' }} /></div>\n <div><img src=\"https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg\" style={{ width: '100%' }} /></div>\n <div><img src=\"https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg\" style={{ width: '100%' }} /></div>\n </Carousel>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-carousel-demo-fade'));\n</code></pre></div>"},"status":"public","toc":""},{"title":"多模块轮播（单次）","id":"components-carousel-demo-multiple","tags":[],"filepath":"site/components/carousel/demo/multiple.md","directory":"components/carousel/demo","filename":"multiple","meta":{"title":"多模块轮播（单次）","description":"\n","order":"2","filepath":"site/components/carousel/demo/multiple.md","filename":"multiple","directory":"components/carousel/demo","id":"components-carousel-demo-multiple","template":"demos","html":"<style type=\"text/css\">.demo-multiple {\n width: 1000px;\n height: 225px;\n}\n\n.code-box {\n width: 100%;\n}\n\n/* CSS END JS START*/\n</style><div class=\"highlight\"><pre><code class=\"css\">.demo-multiple {\n width: 1000px;\n height: 225px;\n}\n\n.code-box {\n width: 100%;\n}\n\n/* CSS END JS START*/\n</code></pre></div><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 _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\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\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 return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var images = ['https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB1mYJ_aLDH8KJjy1XcXXcpdXXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB11MV_aLDH8KJjy1XcXXcpdXXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB11Op4aMnD8KJjy1XdXXaZsVXa-400-225.jpg'];\n return React.createElement(\n 'div',\n { style: { width: 1000 } },\n React.createElement(\n _uxcore.Carousel,\n { className: 'demo-multiple', autoplay: true, pauseOnHover: true, slidesToShow: 3 },\n images.map(function (url) {\n return React.createElement(\n 'div',\n { style: { margin: '0px 2px' } },\n React.createElement('img', { src: url, style: { width: '100%' } })\n );\n })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-carousel-demo-multiple'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';;\n\nimport { Carousel } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n const images = [\n 'https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB1mYJ_aLDH8KJjy1XcXXcpdXXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB11MV_aLDH8KJjy1XcXXcpdXXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB11Op4aMnD8KJjy1XdXXaZsVXa-400-225.jpg',\n ];\n return (\n <div style={{ width: 1000 }}>\n <Carousel className=\"demo-multiple\" autoplay pauseOnHover slidesToShow={3}>\n {images.map(url => (\n <div style={{ margin: '0px 2px' }}><img src={url} style={{ width: '100%' }} /></div>\n ))}\n </Carousel>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-carousel-demo-multiple'));\n</code></pre></div>"},"status":"public","toc":""},{"title":"多模块轮播（成组）","id":"components-carousel-demo-multiple-group","tags":[],"filepath":"site/components/carousel/demo/multiple-group.md","directory":"components/carousel/demo","filename":"multiple-group","meta":{"title":"多模块轮播（成组）","description":"\n","order":"3","filepath":"site/components/carousel/demo/multiple-group.md","filename":"multiple-group","directory":"components/carousel/demo","id":"components-carousel-demo-multiple-group","template":"demos","html":"<style type=\"text/css\">.demo-multiple {\n width: 1000px;\n height: 225px;\n}\n\n.code-box {\n width: 100%;\n}\n\n/* CSS END JS START*/\n</style><div class=\"highlight\"><pre><code class=\"css\">.demo-multiple {\n width: 1000px;\n height: 225px;\n}\n\n.code-box {\n width: 100%;\n}\n\n/* CSS END JS START*/\n</code></pre></div><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 _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\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\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 return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var images = ['https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB1mYJ_aLDH8KJjy1XcXXcpdXXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB11MV_aLDH8KJjy1XcXXcpdXXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB11Op4aMnD8KJjy1XdXXaZsVXa-400-225.jpg'];\n return React.createElement(\n 'div',\n { style: { width: 1000 } },\n React.createElement(\n _uxcore.Carousel,\n { className: 'demo-multiple', autoplay: true, pauseOnHover: true, slidesToShow: 3, slidesToScroll: 3 },\n images.map(function (url) {\n return React.createElement(\n 'div',\n { style: { margin: '0px 2px' } },\n React.createElement('img', { src: url, style: { width: '100%' } })\n );\n })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-carousel-demo-multiple-group'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';;\n\nimport { Carousel } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n const images = [\n 'https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB1mYJ_aLDH8KJjy1XcXXcpdXXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB11MV_aLDH8KJjy1XcXXcpdXXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB11Op4aMnD8KJjy1XdXXaZsVXa-400-225.jpg',\n ];\n return (\n <div style={{ width: 1000 }}>\n <Carousel className=\"demo-multiple\" autoplay pauseOnHover slidesToShow={3} slidesToScroll={3}>\n {images.map(url => (\n <div style={{ margin: '0px 2px' }}><img src={url} style={{ width: '100%' }} /></div>\n ))}\n </Carousel>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-carousel-demo-multiple-group'));\n</code></pre></div>"},"status":"public","toc":""},{"title":"大指示器","id":"components-carousel-demo-large-arrow","tags":[],"filepath":"site/components/carousel/demo/large-arrow.md","directory":"components/carousel/demo","filename":"large-arrow","meta":{"title":"大指示器","description":"\n当轮播较大时，使用大的指示器会有更好的视觉体验。\n","order":"4","filepath":"site/components/carousel/demo/large-arrow.md","filename":"large-arrow","directory":"components/carousel/demo","id":"components-carousel-demo-large-arrow","template":"demos","html":"<style type=\"text/css\">.demo-large-arrow {\n width: 600px;\n}\n\n.code-box {\n width: 100%;\n}\n\n/* CSS END JS START*/\n</style><div class=\"highlight\"><pre><code class=\"css\">.demo-large-arrow {\n width: 600px;\n}\n\n.code-box {\n width: 100%;\n}\n\n/* CSS END JS START*/\n</code></pre></div><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 _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\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\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 return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { style: { width: 1000 } },\n React.createElement(\n _uxcore.Carousel,\n { className: 'demo-large-arrow', autoplay: true, pauseOnHover: true, largeArrowsAndDots: true },\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tfs/TB1b8p_aMvD8KJjy0FlXXagBFXa-533-300.jpg', style: { width: '100%' } })\n ),\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tfs/TB1F1h7aL6H8KJjy0FjXXaXepXa-800-450.jpg', style: { width: '100%' } })\n ),\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tfs/TB1clp_aMvD8KJjy0FlXXagBFXa-533-300.jpg', style: { width: '100%' } })\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-carousel-demo-large-arrow'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';;\n\nimport { Carousel } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n return (\n <div style={{ width: 1000 }}>\n <Carousel className=\"demo-large-arrow\" autoplay pauseOnHover largeArrowsAndDots>\n <div><img src=\"https://img.alicdn.com/tfs/TB1b8p_aMvD8KJjy0FlXXagBFXa-533-300.jpg\" style={{ width: '100%' }} /></div>\n <div><img src=\"https://img.alicdn.com/tfs/TB1F1h7aL6H8KJjy0FjXXaXepXa-800-450.jpg\" style={{ width: '100%' }} /></div>\n <div><img src=\"https://img.alicdn.com/tfs/TB1clp_aMvD8KJjy0FlXXagBFXa-533-300.jpg\" style={{ width: '100%' }} /></div>\n </Carousel>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-carousel-demo-large-arrow'));\n</code></pre></div>"},"status":"public","toc":""}]

基本使用

.demo {
    width: 400px;
    height: 225px;
}

.code-box {
    width: 100%;
}

/* CSS END JS START*/

import classnames from 'classnames';;

import { Carousel } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <div style={{ width: 1000 }}>
        <Carousel className="demo" autoplay pauseOnHover>
          <div><img src="https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg" style={{ width: '100%' }} /></div>
          <div><img src="https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg" style={{ width: '100%' }} /></div>
          <div><img src="https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg" style={{ width: '100%' }} /></div>
        </Carousel>
      </div>
    );
  }
}

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

淡入淡出

fade 为 true 时，切换效果为淡入淡出

.demo {
    width: 400px;
    height: 225px;
}

.code-box {
    width: 100%;
}

/* CSS END JS START*/

import classnames from 'classnames';;

import { Carousel } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <div style={{ width: 1000 }}>
        <Carousel className="demo" autoplay pauseOnHover fade>
          <div><img src="https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg" style={{ width: '100%' }} /></div>
          <div><img src="https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg" style={{ width: '100%' }} /></div>
          <div><img src="https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg" style={{ width: '100%' }} /></div>
        </Carousel>
      </div>
    );
  }
}

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

多模块轮播（单次）

.demo-multiple {
    width: 1000px;
    height: 225px;
}

.code-box {
    width: 100%;
}

/* CSS END JS START*/

import classnames from 'classnames';;

import { Carousel } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    const images = [
      'https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg',
      'https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg',
      'https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg',
      'https://img.alicdn.com/tfs/TB1mYJ_aLDH8KJjy1XcXXcpdXXa-400-225.jpg',
      'https://img.alicdn.com/tfs/TB11MV_aLDH8KJjy1XcXXcpdXXa-400-225.jpg',
      'https://img.alicdn.com/tfs/TB11Op4aMnD8KJjy1XdXXaZsVXa-400-225.jpg',
    ];
    return (
      <div style={{ width: 1000 }}>
        <Carousel className="demo-multiple" autoplay pauseOnHover slidesToShow={3}>
          {images.map(url => (
            <div style={{ margin: '0px 2px' }}><img src={url} style={{ width: '100%' }} /></div>
                        ))}
        </Carousel>
      </div>
    );
  }
}

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

多模块轮播（成组）

.demo-multiple {
    width: 1000px;
    height: 225px;
}

.code-box {
    width: 100%;
}

/* CSS END JS START*/

import classnames from 'classnames';;

import { Carousel } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    const images = [
      'https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg',
      'https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg',
      'https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg',
      'https://img.alicdn.com/tfs/TB1mYJ_aLDH8KJjy1XcXXcpdXXa-400-225.jpg',
      'https://img.alicdn.com/tfs/TB11MV_aLDH8KJjy1XcXXcpdXXa-400-225.jpg',
      'https://img.alicdn.com/tfs/TB11Op4aMnD8KJjy1XdXXaZsVXa-400-225.jpg',
    ];
    return (
      <div style={{ width: 1000 }}>
        <Carousel className="demo-multiple" autoplay pauseOnHover slidesToShow={3} slidesToScroll={3}>
          {images.map(url => (
            <div style={{ margin: '0px 2px' }}><img src={url} style={{ width: '100%' }} /></div>
                        ))}
        </Carousel>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-carousel-demo-multiple-group'));

大指示器

当轮播较大时，使用大的指示器会有更好的视觉体验。

.demo-large-arrow {
    width: 600px;
}

.code-box {
    width: 100%;
}

/* CSS END JS START*/

import classnames from 'classnames';;

import { Carousel } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <div style={{ width: 1000 }}>
        <Carousel className="demo-large-arrow" autoplay pauseOnHover largeArrowsAndDots>
          <div><img src="https://img.alicdn.com/tfs/TB1b8p_aMvD8KJjy0FlXXagBFXa-533-300.jpg" style={{ width: '100%' }} /></div>
          <div><img src="https://img.alicdn.com/tfs/TB1F1h7aL6H8KJjy0FjXXaXepXa-800-450.jpg" style={{ width: '100%' }} /></div>
          <div><img src="https://img.alicdn.com/tfs/TB1clp_aMvD8KJjy0FlXXagBFXa-533-300.jpg" style={{ width: '100%' }} /></div>
        </Carousel>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-carousel-demo-large-arrow'));

Props

Property	Type	Description	Working
className	String	Additional class name for the inner slider div	Yes
adaptiveHeight	bool	Adjust the slide's height automatically	Yes
arrows	bool	Should we show Left and right nav arrows	Yes
nextArrow	React Component	Use this component for the next arrow button	Yes
prevArrow	React Component	Use this component for the prev arrow button	Yes
autoplay	bool	Should the scroller auto scroll?	Yes
pauseOnHover	bool	Should pause autoplay when an item is hoverd	No
autoplaySpeed	int	delay between each auto scoll. in ms	Yes
centerMode	bool	Should we centre to a single item?	Yes
centerPadding
cssEase
dots	bool	Should we show the dots at the bottom of the gallery	Yes
dotsClass	string	Class applied to the dots if they are enabled	Yes
draggable	bool	Is the gallery scrollable via dragging on desktop?	Yes
easing	string
fade	bool	Slides use fade for transition	Yes
focusOnSelect	bool
infinite	bool	should the gallery wrap around it's contents	Yes
initialSlide	int	which item should be the first to be displayed	Yes
lazyLoad	bool	Loads images or renders components on demands	Yes
responsive	array	Array of objects in the form of `{ breakpoint: int, settings: { ... } }` The breakpoint int is the `maxWidth` so the settings will be applied when resolution is below this value. Breakpoints in the array should be ordered from smalles to greatest. Use 'unslick' in place of the settings object to disable rendering the carousel at that breakpoint. Example: `[ { breakpoint: 768, settings: { slidesToShow: 3 } }, { breakpoint: 1024, settings: { slidesToShow: 5 } }, { breakpoint: 100000, settings: 'unslick' } ]`	Yes
rtl	bool	Reverses the slide order	Yes
slide	string
slidesToShow	int	Number of slides to be visible at a time	Yes
slidesToScroll	int	Number of slides to scroll for each navigation item
speed	int
swipe	bool
swipeToSlide	bool
touchMove	bool
touchThreshold	int
variableWidth	bool
useCSS	bool	Enable/Disable CSS Transitions	Yes
vertical	bool
afterChange	function	callback function called after the current index changes	Yes
beforeChange	function	callback function called before the current index changes	Yes
slickGoTo	int	go to the specified slide number

组件演示

Props

更多细节详见 React Slick