---
nav:
 title: 组件
 order: 2
group:
    title: 其他 
    order: 7 
title: ImageGallery
order: 6
toc: content

---
## ImageGallery 图片画廊
`children`展示，需要保证有img标签，如：
``` 
  <a data-src="预览地址" 
     data-sub-html="<h4>描述内容</h4> <p> 可以是DOM结构</p>" >
    <img className="img-responsive"
           src="缩略图地址"/>
  </a>
```
<code title="基础用法" hideactions='["CSB"]' src="../../src/ImageGallery/demos/basic.tsx"></code>


## ImagePreview 图集预览

### 渲染在body
<code title="基础用法" hideactions='["CSB"]' src="../../src/ImageGallery/demos/images.tsx"></code>

### 直接使用

外层结构需要加个 `position: relative `

<code title="基础用法" hideactions='["CSB"]' src="../../src/ImageGallery/demos/preview.tsx"></code>


## API

| 参数      | 说明         | 类型         | 默认值 | 参考值|
|----------|-------------------|-------------|-------|------|
| hasThumbnail | 是否显示缩略图片 | Boolean | `true`||
| children | 直接嵌套子元素，但必须是指定DOM,必须有<img> | ReactNode | | -|
| items | 数据源方式 | Array<> |- | |


## ImagePreview API

| 参数      | 说明         | 类型         | 默认值 | 参考值|
|----------|-------------------|-------------|-------|------|
| hasThumbnail | 是否显示缩略图片 | Boolean | `true`||
| children | 直接嵌套子元素，但必须是指定DOM,必须有<img> |ReactNode | | -|
| galleryItems | 数据源方式 | Array<> |- | |
| open | 是否默认显示 |Boolean|- | |
| mode | 展示方式 | String|- | 'inline' |
| showToolbar | 是否显示工具栏 | Boolean|- |   |
| current | 当前选中图片序号 | Number|- |   |
| onClose | 关闭事件 | Function|- |   |

### children内数据说明

| 参数      | 说明         | 
|----------|-------------------|
| `<a>`data-src | 预览地址 |
| `<a>`data-sub-html | 描述性结构 |
| `<img>`src | 预览地址，如果没有则会使用`data-src` |