@absolom/react-3dgallery 中文文档教程
react-3dgallery
Demo
Install
npm install --save @absolom/react-3dgallery
Usage
import React, { Component } from 'react'
import Gallery from '@absolom/react-3dgallery'
class Example extends Component {
render () {
return (
<Gallery
images={[
{src: 'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg'},
{src: 'https://cdn.pixabay.com/photo/2015/12/01/20/28/green-1072828_960_720.jpg'},
{src: 'https://cdn.pixabay.com/photo/2017/02/01/22/02/mountain-landscape-2031539_960_720.jpg'},
{src: 'https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_960_720.jpg'},
{src: 'https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_960_720.jpg'},
]}
backButton={({className}) => <button className={className} onClick={() => console.log("back action")}>Back</button>}
/>
)
}
}
All Properties
images = [
{
src: "url of image (required)",
text: "optional label"
},
...
]
background = {
color: "optional color of background, default #000000",
image: "url of optional background image"
}
backButton // a React element, like a button or link (required)
To-do
- add option to set corner where the back button appears
- add option to set fullscreen display
- change the names of the variables for more explicit names
- continue to adapt the code to React logic
License
MIT © abs0lom
react-3dgallery
an adaptation of this gallery
Demo
Install
npm install --save @absolom/react-3dgallery
Usage
import React, { Component } from 'react'
import Gallery from '@absolom/react-3dgallery'
class Example extends Component {
render () {
return (
<Gallery
images={[
{src: 'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg'},
{src: 'https://cdn.pixabay.com/photo/2015/12/01/20/28/green-1072828_960_720.jpg'},
{src: 'https://cdn.pixabay.com/photo/2017/02/01/22/02/mountain-landscape-2031539_960_720.jpg'},
{src: 'https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_960_720.jpg'},
{src: 'https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_960_720.jpg'},
]}
backButton={({className}) => <button className={className} onClick={() => console.log("back action")}>Back</button>}
/>
)
}
}
All Properties
images = [
{
src: "url of image (required)",
text: "optional label"
},
...
]
background = {
color: "optional color of background, default #000000",
image: "url of optional background image"
}
backButton // a React element, like a button or link (required)
To-do
- add option to set corner where the back button appears
- add option to set fullscreen display
- change the names of the variables for more explicit names
- continue to adapt the code to React logic
License
MIT © abs0lom