Browse Source

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
pull/35099/head
PCCCCCCC 3 years ago
committed by GitHub
parent
commit
9038524376
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 37
      components/image/demo/preview-group-top-progress.md
  2. 6
      components/image/style/index.less

37
components/image/demo/preview-group-top-progress.md

@ -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;
```

6
components/image/style/index.less

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

Loading…
Cancel
Save