@absolom/react-3dgallery 中文文档教程

发布于 6年前 浏览 21 项目主页 更新于 3年前

react-3dgallery NPMJavaScript Style Guide

这个画廊

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 NPMJavaScript Style Guide

an adaptation of this gallery

Demo

live 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

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文