import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs';
import Thumbnail from '.';

<Meta title="数据展示/缩略图 Thumbnail" component={Thumbnail} />

# 缩略图 Thumbnail

## 导入

```typescript
import { Thumbnail } from '@ahri-ui/core';
```

## 预览单张图片

<Canvas>
  <Story name="预览单张">
    <div>
      <Thumbnail
        src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
        width={80}
      />
    </div>
  </Story>
</Canvas>

## 预览多张图片

<Canvas>
  <Story name="预览多张">
    <div>
      <Thumbnail
        src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp"
        width={80}
        previewList={[
          'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
          'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
          'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
        ]}
      />
    </div>
  </Story>
</Canvas>

## 隐藏预览多张图片数字

<Canvas>
  <Story name="隐藏预览数字">
    <div>
      <Thumbnail
        src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp"
        width={80}
        showCount={false}
        previewList={[
          'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
          'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
          'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
        ]}
      />
    </div>
  </Story>
</Canvas>

## 关闭预览

<Canvas>
  <Story name="关闭预览">
    <div>
      <Thumbnail
        src="https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp"
        width={80}
        preview={false}
      />
    </div>
  </Story>
</Canvas>

## 参数

<ArgsTable of={Thumbnail} />