ant-design/components/image/demo/controlled-preview.tsx
叶枫 502dac12aa
docs: format code ()
* docs: fix code

* feat: lint

* feat: prettier

* feat: test

* feat: review

* feat: format html

* feat: format html
2024-04-08 14:04:08 +08:00

42 lines
1.1 KiB
TypeScript

import React, { useState } from 'react';
import { Button, Image, InputNumber } from 'antd';
const App: React.FC = () => {
const [visible, setVisible] = useState(false);
const [scaleStep, setScaleStep] = useState(0.5);
return (
<>
<div>
scaleStep:{' '}
<InputNumber
min={0.1}
max={5}
defaultValue={0.5}
step={0.1}
onChange={(val) => setScaleStep(val!)}
/>
</div>
<br />
<Button type="primary" onClick={() => setVisible(true)}>
show image preview
</Button>
<Image
width={200}
style={{ display: 'none' }}
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"
preview={{
visible,
scaleStep,
src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
onVisibleChange: (value) => {
setVisible(value);
},
}}
/>
</>
);
};
export default App;