组件演示

[{"title":"基本使用","id":"components-album-demo-basic","tags":[],"filepath":"site/components/album/demo/basic.md","directory":"components/album/demo","filename":"basic","meta":{"title":"基本使用","description":"\n<p>基本用法。</p>\n","order":"0","filepath":"site/components/album/demo/basic.md","filename":"basic","directory":"components/album/demo","id":"components-album-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\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 _uxcoreAlbum = require('uxcore-album');\n\nvar _uxcoreAlbum2 = _interopRequireDefault(_uxcoreAlbum);\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\nvar SwitchFormField = _uxcore.Form.SwitchFormField,\n SelectFormField = _uxcore.Form.SelectFormField,\n FormRow = _uxcore.Form.FormRow;\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 values: {\n thumbPlacement: 'right'\n }\n };\n _this.handleChange = _this.handleChange.bind(_this);\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(values) {\n this.setState({\n values: values\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Form,\n { className: 'demo-control', jsxvalues: this.state.values, jsxonChange: this.handleChange },\n React.createElement(SwitchFormField, { jsxlabel: '\\u663E\\u793A\\u7F29\\u7565\\u56FE', jsxname: 'enableThumbs' }),\n React.createElement(SelectFormField, { jsxlabel: '\\u7F29\\u7565\\u56FE\\u4F4D\\u7F6E', jsxname: 'thumbPlacement', jsxdata: {\n right: 'right',\n left: 'left',\n top: 'top',\n bottom: 'bottom'\n }, jsxshow: !!this.state.values.enableThumbs\n })\n )\n ),\n React.createElement(\n _uxcoreAlbum2.default,\n _extends({ width: 400, height: 200, enableKeyBoardControl: true }, this.state.values),\n React.createElement(_uxcoreAlbum.Photo, { src: '//img.alicdn.com/imgextra/i2/927018118/TB13fBjKFXXXXbPXpXXXXXXXXXX_!!0-tstar.jpg', key: 0 }),\n React.createElement(_uxcoreAlbum.Photo, { src: 'https://img.alicdn.com/tps/i4/TB1bokgFVXXXXbKXFXXYCct.pXX-238-238.png', key: 1 }),\n React.createElement(_uxcoreAlbum.Photo, { src: '//img.alicdn.com/imgextra/i4/927018118/TB1N0hqKFXXXXXDXXXXXXXXXXXX_!!0-tstar.jpg', key: 2 }),\n React.createElement(_uxcoreAlbum.Photo, { src: 'https://img.alicdn.com/imgextra/i2/290551947/TB1C799LFXXXXaiXpXXXXXXXXXX_!!0-tstar.jpg', key: 3 }),\n React.createElement(_uxcoreAlbum.Photo, { src: 'https://img.alicdn.com/imgextra/i1/290551947/TB1p81JLFXXXXXXaXXXXXXXXXXX_!!0-tstar.jpg', key: 4 }),\n React.createElement(_uxcoreAlbum.Photo, { src: 'https://img.alicdn.com/imgextra/i2/290551947/TB1W.ZrLpXXXXbMXpXXXXXXXXXX_!!0-tstar.jpg', key: 5 }),\n React.createElement(_uxcoreAlbum.Photo, { src: 'https://img.alicdn.com/imgextra/i1/673400424/TB1Jze1KXXXXXcfXFXXXXXXXXXX_!!673400424-0-tstar.jpg', key: 6 }),\n React.createElement(_uxcoreAlbum.Photo, { src: 'https://img.alicdn.com/imgextra/i4/673400424/TB1d2PkKXXXXXbiXXXXXXXXXXXX_!!673400424-0-tstar.jpg', key: 7 })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-album-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\n<span class=\"hljs-keyword\">import</span> Album, { Photo } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-album'</span>;\n<span class=\"hljs-keyword\">import</span> { Form } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-keyword\">const</span> { SwitchFormField, SelectFormField, FormRow } = Form;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n values: {\n thumbPlacement: <span class=\"hljs-string\">'right'</span>,\n },\n };\n <span class=\"hljs-keyword\">this</span>.handleChange = <span class=\"hljs-keyword\">this</span>.handleChange.bind(<span class=\"hljs-keyword\">this</span>);\n }\n\n handleChange(values) {\n <span class=\"hljs-keyword\">this</span>.setState({\n values,\n });\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Form</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"demo-control\"</span> <span class=\"hljs-attribute\">jsxvalues</span>=<span class=\"hljs-value\">{this.state.values}</span> <span class=\"hljs-attribute\">jsxonChange</span>=<span class=\"hljs-value\">{this.handleChange}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">SwitchFormField</span> <span class=\"hljs-attribute\">jsxlabel</span>=<span class=\"hljs-value\">\"显示缩略图\"</span> <span class=\"hljs-attribute\">jsxname</span>=<span class=\"hljs-value\">\"enableThumbs\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">SelectFormField</span> <span class=\"hljs-attribute\">jsxlabel</span>=<span class=\"hljs-value\">\"缩略图位置\"</span> <span class=\"hljs-attribute\">jsxname</span>=<span class=\"hljs-value\">\"thumbPlacement\"</span> <span class=\"hljs-attribute\">jsxdata</span>=<span class=\"hljs-value\">{{</span>\n <span class=\"hljs-attribute\">right:</span> '<span class=\"hljs-attribute\">right</span>',\n <span class=\"hljs-attribute\">left:</span> '<span class=\"hljs-attribute\">left</span>',\n <span class=\"hljs-attribute\">top:</span> '<span class=\"hljs-attribute\">top</span>',\n <span class=\"hljs-attribute\">bottom:</span> '<span class=\"hljs-attribute\">bottom</span>',\n }} <span class=\"hljs-attribute\">jsxshow</span>=<span class=\"hljs-value\">{!!this.state.values.enableThumbs}</span>\n /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Form</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Album</span> <span class=\"hljs-attribute\">width</span>=<span class=\"hljs-value\">{400}</span> <span class=\"hljs-attribute\">height</span>=<span class=\"hljs-value\">{200}</span> <span class=\"hljs-attribute\">enableKeyBoardControl</span> {<span class=\"hljs-attribute\">...this.state.values</span>}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Photo</span> <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"//img.alicdn.com/imgextra/i2/927018118/TB13fBjKFXXXXbPXpXXXXXXXXXX_!!0-tstar.jpg\"</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{0}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Photo</span> <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"https://img.alicdn.com/tps/i4/TB1bokgFVXXXXbKXFXXYCct.pXX-238-238.png\"</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\">Photo</span> <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"//img.alicdn.com/imgextra/i4/927018118/TB1N0hqKFXXXXXDXXXXXXXXXXXX_!!0-tstar.jpg\"</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\">Photo</span> <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"https://img.alicdn.com/imgextra/i2/290551947/TB1C799LFXXXXaiXpXXXXXXXXXX_!!0-tstar.jpg\"</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\">Photo</span> <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"https://img.alicdn.com/imgextra/i1/290551947/TB1p81JLFXXXXXXaXXXXXXXXXXX_!!0-tstar.jpg\"</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{4}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Photo</span> <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"https://img.alicdn.com/imgextra/i2/290551947/TB1W.ZrLpXXXXbMXpXXXXXXXXXX_!!0-tstar.jpg\"</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{5}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Photo</span> <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"https://img.alicdn.com/imgextra/i1/673400424/TB1Jze1KXXXXXcfXFXXXXXXXXXX_!!673400424-0-tstar.jpg\"</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{6}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Photo</span> <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"https://img.alicdn.com/imgextra/i4/673400424/TB1d2PkKXXXXXbiXXXXXXXXXXXX_!!673400424-0-tstar.jpg\"</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{7}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Album</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-album-demo-basic'));</span></code></pre></div><style type=\"text/css\">.demo-control {\n width: 400px;\n}\n</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-class\">.demo-control</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">400px</span></span></span>;\n}</span>\n</code></pre></div>"},"status":"public","toc":""},{"title":"API 调用","id":"components-album-demo-api","tags":[],"filepath":"site/components/album/demo/api.md","directory":"components/album/demo","filename":"api","meta":{"title":"API 调用","description":"\n<p>通过 API 的方式,在其他组件中使用点击查看大图的功能</p>\n","order":"1","filepath":"site/components/album/demo/api.md","filename":"api","directory":"components/album/demo","id":"components-album-demo-api","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Photo = _uxcore.Album.Photo;\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 _this.handleClick = _this.handleClick.bind(_this);\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleClick',\n value: function handleClick() {\n _uxcore.Album.show({\n photos: [React.createElement(Photo, {\n src: '//img.alicdn.com/imgextra/i2/927018118/TB13fBjKFXXXXbPXpXXXXXXXXXX_!!0-tstar.jpg',\n key: 0\n }), React.createElement(Photo, { src: 'https://img.alicdn.com/tps/i4/TB1bokgFVXXXXbKXFXXYCct.pXX-238-238.png', key: 1 }), React.createElement(Photo, {\n src: '//img.alicdn.com/imgextra/i4/927018118/TB1N0hqKFXXXXXDXXXXXXXXXXXX_!!0-tstar.jpg',\n key: 2\n })]\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Button,\n { onClick: this.handleClick },\n 'API \\u8C03\\u7528'\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-album-demo-api'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\n<span class=\"hljs-keyword\">import</span> { Album } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-keyword\">const</span> { Photo } = Album;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n };\n <span class=\"hljs-keyword\">this</span>.handleClick = <span class=\"hljs-keyword\">this</span>.handleClick.bind(<span class=\"hljs-keyword\">this</span>);\n }\n\n handleClick() {\n Album.show({\n photos: [\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Photo</span>\n <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"//img.alicdn.com/imgextra/i2/927018118/TB13fBjKFXXXXbPXpXXXXXXXXXX_!!0-tstar.jpg\"</span>\n <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{0}</span>\n /&gt;</span>,\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Photo</span> <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"https://img.alicdn.com/tps/i4/TB1bokgFVXXXXbKXFXXYCct.pXX-238-238.png\"</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\">Photo</span>\n <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"//img.alicdn.com/imgextra/i4/927018118/TB1N0hqKFXXXXXDXXXXXXXXXXXX_!!0-tstar.jpg\"</span>\n <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{2}</span>\n /&gt;</span>,\n ],\n });\n }\n\n\n render() {\n return (\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{this.handleClick}</span>&gt;</span>API 调用<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-album-demo-api'));</span></code></pre></div><style type=\"text/css\"></style><div class=\"highlight\"><pre><code class=\"css\"></code></pre></div>"},"status":"public","toc":""}]

基本用法。


import Album, { Photo } from 'uxcore-album';
import { Form } from 'uxcore';

const { SwitchFormField, SelectFormField, FormRow } = Form;

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      values: {
        thumbPlacement: 'right',
      },
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(values) {
    this.setState({
      values,
    });
  }

  render() {
    return (
      <div>
        <div>
          <Form className="demo-control" jsxvalues={this.state.values} jsxonChange={this.handleChange}>
            <SwitchFormField jsxlabel="显示缩略图" jsxname="enableThumbs" />
            <SelectFormField jsxlabel="缩略图位置" jsxname="thumbPlacement" jsxdata={{
              right: 'right',
              left: 'left',
              top: 'top',
              bottom: 'bottom',
            }} jsxshow={!!this.state.values.enableThumbs}
            />
          </Form>
        </div>
        <Album width={400} height={200} enableKeyBoardControl {...this.state.values}>
          <Photo src="//img.alicdn.com/imgextra/i2/927018118/TB13fBjKFXXXXbPXpXXXXXXXXXX_!!0-tstar.jpg" key={0} />
          <Photo src="https://img.alicdn.com/tps/i4/TB1bokgFVXXXXbKXFXXYCct.pXX-238-238.png" key={1} />
          <Photo src="//img.alicdn.com/imgextra/i4/927018118/TB1N0hqKFXXXXXDXXXXXXXXXXXX_!!0-tstar.jpg" key={2} />
          <Photo src="https://img.alicdn.com/imgextra/i2/290551947/TB1C799LFXXXXaiXpXXXXXXXXXX_!!0-tstar.jpg" key={3} />
          <Photo src="https://img.alicdn.com/imgextra/i1/290551947/TB1p81JLFXXXXXXaXXXXXXXXXXX_!!0-tstar.jpg" key={4} />
          <Photo src="https://img.alicdn.com/imgextra/i2/290551947/TB1W.ZrLpXXXXbMXpXXXXXXXXXX_!!0-tstar.jpg" key={5} />
          <Photo src="https://img.alicdn.com/imgextra/i1/673400424/TB1Jze1KXXXXXcfXFXXXXXXXXXX_!!673400424-0-tstar.jpg" key={6} />
          <Photo src="https://img.alicdn.com/imgextra/i4/673400424/TB1d2PkKXXXXXbiXXXXXXXXXXXX_!!673400424-0-tstar.jpg" key={7} />
        </Album>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-album-demo-basic'));
.demo-control  {
  width: 400px;
}

通过 API 的方式,在其他组件中使用点击查看大图的功能


import { Album } from 'uxcore';
import { Button } from 'uxcore';

const { Photo } = Album;

class Demo extends React.Component {

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

  handleClick() {
    Album.show({
      photos: [
        <Photo
          src="//img.alicdn.com/imgextra/i2/927018118/TB13fBjKFXXXXbPXpXXXXXXXXXX_!!0-tstar.jpg"
          key={0}
        />,
        <Photo src="https://img.alicdn.com/tps/i4/TB1bokgFVXXXXbKXFXXYCct.pXX-238-238.png" key={1} />,
        <Photo
          src="//img.alicdn.com/imgextra/i4/927018118/TB1N0hqKFXXXXXDXXXXXXXXXXXX_!!0-tstar.jpg"
          key={2}
        />,
      ],
    });
  }


  render() {
    return (
      <div>
        <Button onClick={this.handleClick}>API 调用</Button>
      </div>
    );
  }
}

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

Album.Props

Name Type Required Default Comments
width number or string no '' the default image cover's width
height number or string no '' the default image cover's height
enableKeyBoardControl boolean no true whether the album can be controlled by the keyboard navigation
enableThumbs boolean no false whether the show thumbnail list
thumbPlacement string no right the placement of thumbnail, you can set 'top'/'right'/'bottom'/'left'/
thumbBackground string no #000 if the image couldn't cover the gird, give it a background

Photo.Props

Name Type Required Default Comments
src string yes '' same as img's src
thumb-src string no '' set thumbnail image source if 'enableThumbs' is true

Method

Album.show(config)

With this method, the component can be used by calling Album.show({src: 'foo/url'}) or Album.show({photos: [<Photo src="#url1" />, <Photo src="#url2" />]}) directly.

config

Name Type Required Default Comments
src string false null the image src
photos array of Photo false [] array of Photo element
getContainer function false the function will append a new div to document body. define the container which album rendered into