uxcore-album

React album

Development

git clone https://github.com/uxcore/uxcore-album
cd uxcore-album
npm install
npm run server

if you'd like to save your install time，you can use uxcore-tools globally.

npm install uxcore-tools -g
git clone https://github.com/uxcore/uxcore-album
cd uxcore-album
npm install
npm run dep
npm run start

Test Case

npm run test

Coverage

npm run coverage

Demo

http://uxcore.github.io/components/album

Contribute

Yes please! See the CONTRIBUTING for details.

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 | | current | number | no | 0 | the current shown photo index | | enableKeyBoardControl | boolean | no | true | whether the album can be controlled by the keyboard navigation | | maskClosable | boolean | no | true | whether click mask to close, this prop will be ignored if set closable prop to false | | 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 | { icon: ReactElement, onClick: function } | Array<{ icon: ReactElement, onClick: function }> | no | [] | 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 | | onChnage | function(index) | false | | Callback method when change | | onClose | function() | false | | Callback method when close | | showButton | boolean | no | false | show the function button(zoomIn/zoomOut) | | customButtons | { icon: ReactElement, onClick: function } | Array<{ icon: ReactElement, onClick: function }> | no | [] | custom function buttons which would be put between zoomIn button and zoomOut button |