Have ideas to improve npm?Join in the discussion! »

    uxcore-album

    0.3.27 • 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

    40

    Version

    0.3.27

    License

    MIT

    Unpacked Size

    121 kB

    Total Files

    34

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar