Uxcore-album NPM

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