# WaterfallGallery

瀑布流形式的 gradio Gallery。

- 支持瀑布流展示图片
- 增加点赞按钮，支持图片额外绑定`like`事件
- 增加 action 按钮，支持图片额外绑定`click`事件
- 响应式 columns

## 如何使用

### 基本使用

<demo name="basic"></demo>

### 响应式 columns

<demo name="responsive_columns"></demo>

### 加载更多

<demo name="load_more"></demo>

### 点赞/点击反馈

<demo name="like_click_feedback"></demo>

## API 及参数列表

以下 API 均为在原有 gradio Gallery 外的额外拓展参数。

### value

接口定义：

```python
GalleryImageType = Union[np.ndarray, _Image.Image, FileData, Path, str]
CaptionedGalleryImageType = Tuple[GalleryImageType, str]


class GalleryImage(GradioModel):
    image: Union[FileData, Path, str]
    caption: Optional[str] = None
    liked: Optional[bool] = None
    # custom meta data
    meta: Optional[Any] = None


class GalleryData(GradioRootModel):
    root: List[GalleryImage]
```

### props

| 属性                   | 类型                 | 默认值  | 描述                                                                                                                                                                                                                                                                                                                                        |
| ---------------------- | -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| has_more               | bool                 | None    | 如果为 True，会显示 "加载更多" 按钮                                                                                                                                                                                                                                                                                                         |
| load_more_button_props | dict                 | None    | ”加载更多“按钮属性，同 gradio Button                                                                                                                                                                                                                                                                                                        |
| columns                | int \| tuple \| dict | 2       | 展示在以下尺寸屏幕（<576px(xs)、<768px(sm)、<992px(md)、<1200px(lg)、<1600px(xl)、>1600px(xll)）中在一行显示的图像数量。 <br/> - 如果传入 int, 则应用于所有尺寸屏幕；<br/> - 如果传入 tuple, 当给出的断点少于 6 个, 则最后一个断点将用于所有后续断点；<br/> - 如果传入 dict, 则可以以 [xs,sm,md,lg,xl,xll] 为键表示每个尺寸屏幕的图像数量。 |
| gap                    | tuple \| int         | 8       | 图片之间的间隙 (px)。 如果传递一个元组，则第一个值是宽度的间隙，第二个值是高度的间隙。如果传递数字，则宽度和高度的间隙相同                                                                                                                                                                                                                  |
| action_label           | str                  | 'Click' | action 按钮的文案。当 `clickable`为 True 时才展示                                                                                                                                                                                                                                                                                           |
| likeable               | bool                 | None    | 是否显示喜欢或不喜欢按钮。 可以通过显示绑定 `.like` 方法自动设置。                                                                                                                                                                                                                                                                          |
| clickable              | bool                 | None    | 是否显示 action 按钮。 可以通过显示绑定 `.click` 方法自动设置。                                                                                                                                                                                                                                                                             |

### event listeners

| 事件                                      | 描述                                                                                                                                                                            |
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `mgr.WaterfallGallery.load_more(fn, ···)` | “加载更多”按钮被点击时触发。                                                                                                                                                    |
| `mgr.WaterfallGallery.like(fn, ···)`      | 当点赞/点踩按钮被点击时触发，EventData 为：<br/> - index：当前图片索引。<br/> - value：当前图片信息。 <br/> - liked：当前图片的喜欢/不喜欢状态，可以为 None，代表用户取消操作。 |
| `mgr.WaterfallGallery.click(fn, ···)`     | action 按钮被点击时触发，EventData 为：<br/> - index：当前图片索引。<br/> - value：当前图片信息。                                                                               |