uxcore.js - React UI Component Set

组件演示

[{"title":"基本使用","id":"components-album-demo-basic","tags":[],"filepath":"site/components/album/demo/basic.md","directory":"components/album/demo","filename":"basic","meta":{"title":"基本使用","description":"\n基本用法。\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({ showButton: true, 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\">\nimport Album, { Photo } from 'uxcore-album';\nimport { Form } from 'uxcore';\n\nconst { SwitchFormField, SelectFormField, FormRow } = Form;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n values: {\n thumbPlacement: 'right',\n },\n };\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(values) {\n this.setState({\n values,\n });\n }\n\n render() {\n return (\n <div>\n <div>\n <Form className=\"demo-control\" jsxvalues={this.state.values} jsxonChange={this.handleChange}>\n <SwitchFormField jsxlabel=\"显示缩略图\" jsxname=\"enableThumbs\" />\n <SelectFormField jsxlabel=\"缩略图位置\" jsxname=\"thumbPlacement\" jsxdata={{\n right: 'right',\n left: 'left',\n top: 'top',\n bottom: 'bottom',\n }} jsxshow={!!this.state.values.enableThumbs}\n />\n </Form>\n </div>\n <Album showButton width={400} height={200} enableKeyBoardControl {...this.state.values}>\n <Photo src=\"//img.alicdn.com/imgextra/i2/927018118/TB13fBjKFXXXXbPXpXXXXXXXXXX_!!0-tstar.jpg\" key={0} />\n <Photo src=\"https://img.alicdn.com/tps/i4/TB1bokgFVXXXXbKXFXXYCct.pXX-238-238.png\" key={1} />\n <Photo src=\"//img.alicdn.com/imgextra/i4/927018118/TB1N0hqKFXXXXXDXXXXXXXXXXXX_!!0-tstar.jpg\" key={2} />\n <Photo src=\"https://img.alicdn.com/imgextra/i2/290551947/TB1C799LFXXXXaiXpXXXXXXXXXX_!!0-tstar.jpg\" key={3} />\n <Photo src=\"https://img.alicdn.com/imgextra/i1/290551947/TB1p81JLFXXXXXXaXXXXXXXXXXX_!!0-tstar.jpg\" key={4} />\n <Photo src=\"https://img.alicdn.com/imgextra/i2/290551947/TB1W.ZrLpXXXXbMXpXXXXXXXXXX_!!0-tstar.jpg\" key={5} />\n <Photo src=\"https://img.alicdn.com/imgextra/i1/673400424/TB1Jze1KXXXXXcfXFXXXXXXXXXX_!!673400424-0-tstar.jpg\" key={6} />\n <Photo src=\"https://img.alicdn.com/imgextra/i4/673400424/TB1d2PkKXXXXXbiXXXXXXXXXXXX_!!673400424-0-tstar.jpg\" key={7} />\n </Album>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-album-demo-basic'));</code></pre></div><style type=\"text/css\">.demo-control {\n width: 400px;\n}\n</style><div class=\"highlight\"><pre><code class=\"css\">.demo-control {\n width: 400px;\n}\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通过 API 的方式，在其他组件中使用点击查看大图的功能\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\">\nimport { Album } from 'uxcore';\nimport { Button } from 'uxcore';\n\nconst { Photo } = Album;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n this.handleClick = this.handleClick.bind(this);\n }\n\n handleClick() {\n Album.show({\n photos: [\n <Photo\n src=\"//img.alicdn.com/imgextra/i2/927018118/TB13fBjKFXXXXbPXpXXXXXXXXXX_!!0-tstar.jpg\"\n key={0}\n />,\n <Photo src=\"https://img.alicdn.com/tps/i4/TB1bokgFVXXXXbKXFXXYCct.pXX-238-238.png\" key={1} />,\n <Photo\n src=\"//img.alicdn.com/imgextra/i4/927018118/TB1N0hqKFXXXXXDXXXXXXXXXXXX_!!0-tstar.jpg\"\n key={2}\n />,\n ],\n });\n }\n\n\n render() {\n return (\n <div>\n <Button onClick={this.handleClick}>API 调用</Button>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-album-demo-api'));</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 showButton 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 调用

通过 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
showButton	boolean	no	false	show the function button(zoomIn/zoomOut)
customButtons	Object or Array	no	{ icon: ReactElement, onClick: function }	custom function buttons which would be put between zoomIn button and zoomOut button
onChange	function(index)	no		Callback method when change
onOpen	function(index)	no		Callback method when open
onClose	function	no		Callback method when close

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