style: fix the style of progress rendering at the top of component Image PreviewGroup (#35092)

* style: fix the style of progress rendering at the top of component Image PreviewGroup

* style: add debug-demo for top progress countRender
This commit is contained in:
PCCCCCCC 2022-04-19 17:07:57 +08:00 committed by GitHub
parent eb7f8c7ef1
commit 9038524376
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 0 deletions

View File

@ -0,0 +1,37 @@
---
order: 100
title:
zh-CN: 多图预览时顶部进度自定义
en-US: Top progress customization when previewing multiple images
debug: true
---
## zh-CN
多图预览时顶部展示进度, 支持自定义
## en-US
The progress is displayed at the top of the multi-image preview, and customization is supported
```jsx
import { Image } from 'antd';
const App = () => (
<Image.PreviewGroup
preview={{ countRender: (current, total) => `当前 ${current} / 总计 ${total}` }}
>
<Image width={150} src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
<Image
width={150}
src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
/>
<Image
width={150}
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
</Image.PreviewGroup>
);
export default App;
```

View File

@ -135,6 +135,12 @@
}
}
&-progress {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
&-icon {
font-size: @image-preview-operation-size;
}