@acamp-components/gallery 中文文档教程

Question

Acamp Gallery

在 Acamp 中使用的图库现在可用于您的页面！

这里试试演示

Install

npm i @acamp-components/gallery

Publish

你需要使用您的 npm 帐户

npm login

登录： 登录后：

npm publish

Props

Prop	type	Description	Default Value
images	Array	Array of image URL	[]
initialImage	Number	The index of the active image on mount	0
height	Number	The height of the wrapper component (in px)	460
columnGutter	Number	The margin between slides (in px)	20
columnWidth	Number	The width of the non-active slides (in px)	75
sideColumns	Number	The number of side columns considering only one side.	2
containImage	String	Whether the gallery should render the image with full height. Possible values: "contain", "contain_active", "off"	"off"
activeOnHover	Boolean	Set to true if you want to active an image on hover	false
navigation	Boolean or Object	Sets the properties for navigation. Accepts true, false or { className: '', showWhenOneImageOrLess: ''}	true. When there's less than one image, navigation is hidden
loaderElement	node	The node element to render when loading at start	null

Style Import

import '@acamp-components/gallery/styles/css/acamp-gallery.css';

import '@acamp-components/gallery/styles/scss/acamp-gallery.scss';

或作为 html 头部的链接

<link
  rel="stylesheet"
  href="https://unpkg.com/@acamp-components/gallery/styles/css/acamp-gallery.css"
/>

<link
  rel="stylesheet"
  href="https://unpkg.com/@acamp-components/gallery/styles/scss/acamp-gallery.scss"
/>

Example

const IMAGES = Array.from(Array(5), () => 'https://via.placeholder.com/300x200');

<AcampGallery
  images={IMAGES}
  height={460}
  columnGutter={20}
  columnWidth={75}
  sideColumns={2}
  containImage={AcampGallery.CONTAIN_OFF}
  activeOnHover={false}
  navigation={{
    className: 'your-navigation-classname',
    showWhenOneImageOrLess: false
  }}
  className='your-gallery-wrapper-classname'
/>;

Credits

由 Marija Vitasovic 设计由 Judith Sirera 在 Acamp 工作期间实施