npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

uxcore-album

0.3.26 • Public • Published

uxcore-album

React album

NPM version build status Test Coverage Dependency Status devDependency Status NPM downloads

Sauce Test Status

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

install

npm i uxcore-album

Downloadsweekly downloads

122

version

0.3.26

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability