+
+
+
+
+
+
+ Preview
+
+
+ 
-
,
-]
+
+
+
-
,
-]
+
+ 
- 
- Preview from one image
Custom preview image
Controlled Preview
+Custom toolbar render
+Custom preview render
Custom preview mask
Top progress customization when previewing multiple images
Custom component token
## API
+### Image
+
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| alt | Image description | string | - | 4.6.0 |
| fallback | Load failure fault-tolerant src | string | - | 4.6.0 |
| height | Image height | string \| number | - | 4.6.0 |
| placeholder | Load placeholder, use default placeholder when set `true` | ReactNode | - | 4.6.0 |
-| preview | preview config, disabled when `false` | boolean \| [previewType](#previewtype) | true | 4.6.0 [previewType](#previewtype):4.7.0 |
+| preview | preview config, disabled when `false` | boolean \| [PreviewType](#PreviewType) | true | 4.6.0 [PreviewType](#PreviewType):4.7.0 |
| src | Image path | string | - | 4.6.0 |
| width | Image width | string \| number | - | 4.6.0 |
| onError | Load failed callback | (event: Event) => void | - | 4.12.0 |
-| rootClassName | add custom className for image root DOM and preview mode root DOM | string | - | 4.20.0 |
+| rootClassName | Add custom className for image root DOM and preview mode root DOM | string | - | 4.20.0 |
+
+Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
+
+### PreviewType
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| visible | Whether the preview dialog is visible or not | boolean | - | - |
+| src | Custom preview src | string | - | 4.10.0 |
+| getContainer | The mounted node for preview dialog but still display at fullScreen | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
+| mask | Thumbnail mask | ReactNode | - | 4.9.0 |
+| maskClassName | The className of the mask | string | - | 4.11.0 |
+| rootClassName | The classname of the preview root DOM | string | - | 5.4.0 |
+| scaleStep | `1 + scaleStep` is the step to increase or decrease the scale | number | 0.5 | - |
+| minScale | Min scale | number | 1 | 5.7.0 |
+| maxScale | Max scale | number | 50 | 5.7.0 |
+| forceRender | Force render preview dialog | boolean | - | - |
+| toolbarRender | Custom toolbar render | (originalNode: React.ReactNode, info: Omit<[ToolbarRenderInfoType](#ToolbarRenderInfoType), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0 |
+| imageRender | Custom preview content | (originalNode: React.ReactNode, info: { transform: [TransformType](#TransformType) }) => React.ReactNode | - | 5.7.0 |
+| onTransform | Callback when the transform of image changed | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | 5.7.0 |
+| onVisibleChange | Callback when `visible` changed | (visible: boolean, prevVisible: boolean) => void | - | - |
+
+## PreviewGroup
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| preview | Preview config, `disabled` when false | boolean \| [PreviewGroupType](#PreviewGroupType) | true | 4.6.0 [PreviewGroupType](#PreviewGroupType):4.7.0 |
+| items | Preview items | string[] \| { src: string, crossOrigin: string, ... }[] | - | 5.7.0 |
+
+### PreviewGroupType
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| visible | Whether the preview dialog is visible or not | boolean | - | - |
+| getContainer | The mounted node for preview dialog but still display at fullScreen | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
+| current | The index of the current preview | number | - | 4.12.0 |
+| mask | Thumbnail mask | ReactNode | - | 4.9.0 |
+| maskClassName | The className of the mask | string | - | 4.11.0 |
+| rootClassName | The classname of the preview root DOM | string | - | 5.4.0 |
+| scaleStep | `1 + scaleStep` is the step to increase or decrease the scale | number | 0.5 | - |
+| minScale | Min scale | number | 1 | 5.7.0 |
+| maxScale | Max scale | number | 50 | 5.7.0 |
+| forceRender | Force render preview dialog | boolean | - | - |
+| countRender | Custom preview count content | (current: number, total: number) => string | - | 4.20.0 |
+| toolbarRender | Custom toolbar render | (originalNode: React.ReactNode, info: [ToolbarRenderInfoType](#ToolbarRenderInfoType)) => React.ReactNode | - | 5.7.0 |
+| imageRender | Custom preview content | (originalNode: React.ReactNode, info: { transform: [TransformType](#TransformType), current: number }) => React.ReactNode | - | 5.7.0 |
+| onTransform | Callback when the transform of image changed | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | 5.7.0 |
+| onChange | Callback when switch preview image | (current: number, prevCurrent: number) => void | - | 5.3.0 |
+| onVisibleChange | Callback when `visible` changed | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 |
-### previewType
+## Interface
+
+### TransformType
```typescript
{
- visible?: boolean;
- onVisibleChange?: (visible, prevVisible, current: number) => void; // `current` only support after v5.3.0
- getContainer?: string | HTMLElement | (() => HTMLElement); // v4.8.0 The mounted node for preview dialog but still display at fullScreen
- src?: string; // v4.10.0
- mask?: ReactNode; // v4.9.0
- maskClassName?: string; // v4.11.0
- rootClassName?: string; // only support after v5.4.0
- current?: number; // v4.12.0 Only support PreviewGroup
- countRender?: (current: number, total: number) => string // v4.20.0 Only support PreviewGroup
- scaleStep?: number;
- onChange?: (current: number, prevCurrent: number) => void; // only support after v5.3.0
+ x: number;
+ y: number;
+ rotate: number;
+ scale: number;
+ flipX: boolean;
+ flipY: boolean;
}
```
-Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
+### TransformAction
+
+```typescript
+type TransformAction =
+ | 'flipY'
+ | 'flipX'
+ | 'rotateLeft'
+ | 'rotateRight'
+ | 'zoomIn'
+ | 'zoomOut'
+ | 'close'
+ | 'prev'
+ | 'next'
+ | 'wheel'
+ | 'doubleClick'
+ | 'move'
+ | 'dragRebound';
+```
+
+### ToolbarRenderInfoType
+
+```typescript
+{
+ icons: {
+ flipYIcon: React.ReactNode;
+ flipXIcon: React.ReactNode;
+ rotateLeftIcon: React.ReactNode;
+ rotateRightIcon: React.ReactNode;
+ zoomOutIcon: React.ReactNode;
+ zoomInIcon: React.ReactNode;
+ closeIcon: React.ReactNode;
+ };
+ actions: {
+ onFlipY: () => void;
+ onFlipX: () => void;
+ onRotateLeft: () => void;
+ onRotateRight: () => void;
+ onZoomOut: () => void;
+ onZoomIn: () => void;
+ onClose: () => void;
+ };
+ transform: TransformType,
+ current: number;
+ total: number;
+}
+```
## Design Token
diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md
index 31e0bf23e8..84236c5bfe 100644
--- a/components/image/index.zh-CN.md
+++ b/components/image/index.zh-CN.md
@@ -25,44 +25,138 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
相册模式
自定义预览图片
受控的预览
+自定义工具栏
+自定义预览内容
自定义预览文本
多图预览时顶部进度自定义
自定义组件 Token
## API
+### Image
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| alt | 图像描述 | string | - | 4.6.0 |
| fallback | 加载失败容错地址 | string | - | 4.6.0 |
| height | 图像高度 | string \| number | - | 4.6.0 |
| placeholder | 加载占位, 为 `true` 时使用默认占位 | ReactNode | - | 4.6.0 |
-| preview | 预览参数，为 `false` 时禁用 | boolean \| [previewType](#previewtype) | true | 4.6.0 [previewType](#previewtype):4.7.0 |
+| preview | 预览参数，为 `false` 时禁用 | boolean \| [PreviewType](#PreviewType) | true | 4.6.0 [PreviewType](#PreviewType):4.7.0 |
| src | 图片地址 | string | - | 4.6.0 |
| width | 图像宽度 | string \| number | - | 4.6.0 |
| onError | 加载错误回调 | (event: Event) => void | - | 4.12.0 |
| rootClassName | 为展示图片根 DOM 和预览大图根 DOM 提供自定义 className | string | - | 4.20.0 |
-### previewType
+其他属性见 [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
+
+### PreviewType
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| visible | 是否显示 | boolean | - | - |
+| src | 自定义预览 src | string | - | 4.10.0 |
+| getContainer | 指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置 | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
+| mask | 缩略图遮罩 | ReactNode | - | 4.9.0 |
+| maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 |
+| rootClassName | 预览图的根 DOM 类名 | string | - | 5.4.0 |
+| scaleStep | `1 + scaleStep` 为缩放放大的每步倍数 | number | 0.5 | - |
+| minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
+| maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
+| forceRender | 强制渲染预览图 | boolean | - | - |
+| toolbarRender | 自定义工具栏 | (originalNode: React.ReactNode, info: Omit<[ToolbarRenderInfoType](#ToolbarRenderInfoType), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0 |
+| imageRender | 自定义预览内容 | (originalNode: React.ReactNode, info: { transform: [TransformType](#TransformType) }) => React.ReactNode | - | 5.7.0 |
+| onTransform | 预览图 transform 变化的回调 | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | 5.7.0 |
+| onVisibleChange | 当 `visible` 发生改变时的回调 | (visible: boolean, prevVisible: boolean) => void | - | - |
+
+## PreviewGroup
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| preview | 预览参数，为 `false` 时禁用 | boolean \| [PreviewGroupType](#PreviewGroupType) | true | 4.6.0 [PreviewGroupType](#PreviewGroupType):4.7.0 |
+| items | 预览数组 | string[] \| { src: string, crossOrigin: string, ... }[] | - | 5.7.0 |
+
+### PreviewGroupType
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| visible | 是否显示 | boolean | - | - |
+| getContainer | 指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置 | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
+| current | 当前预览图的 index | number | - | 4.12.0 |
+| mask | 缩略图遮罩 | ReactNode | - | 4.9.0 |
+| maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 |
+| rootClassName | 预览图的根 DOM 类名 | string | - | 5.4.0 |
+| scaleStep | `1 + scaleStep` 为缩放放大的每步倍数 | number | 0.5 | - |
+| minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
+| maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
+| forceRender | 强制渲染预览图 | boolean | - | - |
+| countRender | 自定义预览计数内容 | (current: number, total: number) => string | - | 4.20.0 |
+| toolbarRender | 自定义工具栏 | (originalNode: React.ReactNode, info: [ToolbarRenderInfoType](#ToolbarRenderInfoType)) => React.ReactNode | - | 5.7.0 |
+| imageRender | 自定义预览内容 | (originalNode: React.ReactNode, info: { transform: [TransformType](#TransformType), current: number }) => React.ReactNode | - | 5.7.0 |
+| onTransform | 预览图 transform 变化的回调 | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | 5.7.0 |
+| onChange | 切换预览图的回调 | (current: number, prevCurrent: number) => void | - | 5.3.0 |
+| onVisibleChange | 当 `visible` 发生改变时的回调 | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 |
+
+## Interface
+
+### TransformType
```typescript
{
- visible?: boolean;
- onVisibleChange?: (visible, prevVisible, current: number) => void; // current 参数 v5.3.0 后支持
- getContainer?: string | HTMLElement | (() => HTMLElement); // v4.8.0 指定预览窗口挂载的节点，但依旧为全屏展示
- src?: string; // v4.10.0
- mask?: ReactNode; // v4.9.0
- maskClassName?: string; // v4.11.0
- rootClassName?: string; // v5.4.0 后支持
- current?: number; // v4.12.0 仅支持 PreviewGroup
- countRender?: (current: number, total: number) => string // v4.20.0 仅支持 PreviewGroup
- scaleStep?: number;
- forceRender?: boolean;
- onChange?: (current: number, prevCurrent: number) => void; // v5.3.0 后支持
+ x: number;
+ y: number;
+ rotate: number;
+ scale: number;
+ flipX: boolean;
+ flipY: boolean;
}
```
-其他属性见 [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
+### TransformAction
+
+```typescript
+type TransformAction =
+ | 'flipY'
+ | 'flipX'
+ | 'rotateLeft'
+ | 'rotateRight'
+ | 'zoomIn'
+ | 'zoomOut'
+ | 'close'
+ | 'prev'
+ | 'next'
+ | 'wheel'
+ | 'doubleClick'
+ | 'move'
+ | 'dragRebound';
+```
+
+### ToolbarRenderInfoType
+
+```typescript
+{
+ icons: {
+ flipYIcon: React.ReactNode;
+ flipXIcon: React.ReactNode;
+ rotateLeftIcon: React.ReactNode;
+ rotateRightIcon: React.ReactNode;
+ zoomOutIcon: React.ReactNode;
+ zoomInIcon: React.ReactNode;
+ closeIcon: React.ReactNode;
+ };
+ actions: {
+ onFlipY: () => void;
+ onFlipX: () => void;
+ onRotateLeft: () => void;
+ onRotateRight: () => void;
+ onZoomOut: () => void;
+ onZoomIn: () => void;
+ onClose: () => void;
+ };
+ transform: TransformType,
+ current: number;
+ total: number;
+}
+```
## Design Token
diff --git a/components/image/style/index.ts b/components/image/style/index.ts
index c5c2eff4e2..3ec31c943d 100644
--- a/components/image/style/index.ts
+++ b/components/image/style/index.ts
@@ -64,7 +64,7 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
[`${previewCls}-operations`]: {
...resetComponent(token),
display: 'flex',
- flexDirection: 'row-reverse',
+ justifyContent: 'flex-end',
alignItems: 'center',
color: token.previewOperationColor,
listStyle: 'none',
@@ -87,7 +87,7 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
pointerEvents: 'none',
},
- '&:last-of-type': {
+ '&:first-of-type': {
marginInlineStart: 0,
},
},
@@ -192,7 +192,6 @@ export const genImagePreviewStyle: GenerateStyle