test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-04 04:58:55 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

docs: update image demo (#26962)

Browse Source
This commit is contained in:
xrk 2020-09-30 16:46:44 +08:00 committed by GitHub
parent 26c5c6e533
commit 39cf26f4fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
components/image/__tests__/__snapshots__/demo.test.js.snap
View File

@ -26,38 +26,48 @@ exports[`renders ./components/image/demo/fallback.md correctly 1`] = `
`;
exports[`renders ./components/image/demo/placeholder.md correctly 1`] = `
Array [
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-image"
style="width:200px"
class="ant-space-item"
style="margin-right:12px"
>
<img
class="ant-image-img"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?undefined"
/>
<div
aria-hidden="true"
class="ant-image-placeholder"
class="ant-image"
style="width:200px"
>
<img
class="ant-image-img"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?undefined"
/>
<div
class="ant-image"
style="width:200px"
aria-hidden="true"
class="ant-image-placeholder"
>
<img
class="ant-image-img"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
/>
<div
class="ant-image"
style="width:200px"
>
<img
class="ant-image-img"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
/>
</div>
</div>
</div>
</div>,
<button
class="ant-btn ant-btn-primary"
style="margin-left:10px"
type="button"
</div>
<div
class="ant-space-item"
>
<span>
Reload
</span>
</button>,
]
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Reload
</span>
</button>
</div>
</div>
`;

9
components/image/demo/placeholder.md
View File

@ -15,12 +15,12 @@ Progressive when large image loading.
```jsx
import React from 'react';
import { Image, Button } from 'antd';
import { Image, Button, Space } from 'antd';
function ImageDemo() {
const [random, setRandom] = React.useState();
return (
<>
<Space size={12}>
<Image
width={200}
src={`https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?${random}`}
@ -33,16 +33,13 @@ function ImageDemo() {
/>
<Button
type="primary"
style={{
marginLeft: 10,
}}
onClick={() => {
setRandom(Date.now());
}}
>
Reload
</Button>
</>
</Space>
);
}