react元件(react-grid-gallery)

yezi-dream發表於2018-07-08

      react有很多好玩的元件,react-grid-gallery就是其中一個,主要處理圖片展示,對圖片進行放大與縮小

     文件:https://www.npmjs.com/package/react-grid-gallery

      demo:https://benhowell.github.io/react-grid-gallery

 

      gallery的options

         images:  圖片路徑

結構為: [{

src: imgUrl,

thumbnail: imgUrl,

}, {

src: imgUrl,

thumbnail: imgUrl,

}, {

src: imgUrl,

thumbnail: imgUrl,

}]

          backdropClosesModal: 使用者點選背景是否會隱藏掉modal(boolean)

         showCloseButton: 是否顯示關閉按鈕(boolean)

backdropClosesModal與showCloseButton可以配合使用,達到想要的效果

 

         images中也有一些option

             thumbnailWidth:圖片寬度

             thumbnailHeight: 圖片高度

             caption: 圖片的標題

 

相關文章