mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-23 06:58:33 +08:00
86 lines
2.0 KiB
TypeScript
86 lines
2.0 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
import { Button, Divider, Image, Modal } from 'antd';
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
const [show1, setShow1] = useState(false);
|
||
|
const [show2, setShow2] = useState(false);
|
||
|
const [show3, setShow3] = useState(false);
|
||
|
return (
|
||
|
<>
|
||
|
<Button
|
||
|
onClick={() => {
|
||
|
setShow1(true);
|
||
|
}}
|
||
|
>
|
||
|
showModal
|
||
|
</Button>
|
||
|
<Modal
|
||
|
open={show1}
|
||
|
afterOpenChange={(open) => {
|
||
|
setShow1(open);
|
||
|
}}
|
||
|
onCancel={() => {
|
||
|
setShow1(false);
|
||
|
}}
|
||
|
>
|
||
|
<Button
|
||
|
onClick={() => {
|
||
|
setShow2(true);
|
||
|
}}
|
||
|
>
|
||
|
test2
|
||
|
</Button>
|
||
|
<Modal
|
||
|
open={show2}
|
||
|
afterOpenChange={(open) => {
|
||
|
setShow2(open);
|
||
|
}}
|
||
|
onCancel={() => {
|
||
|
setShow2(false);
|
||
|
}}
|
||
|
>
|
||
|
<Button
|
||
|
onClick={() => {
|
||
|
setShow3(true);
|
||
|
}}
|
||
|
>
|
||
|
test3
|
||
|
</Button>
|
||
|
<Modal
|
||
|
open={show3}
|
||
|
afterOpenChange={(open) => {
|
||
|
setShow3(open);
|
||
|
}}
|
||
|
onCancel={() => {
|
||
|
setShow3(false);
|
||
|
}}
|
||
|
>
|
||
|
<Image
|
||
|
width={200}
|
||
|
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
||
|
/>
|
||
|
<Divider />
|
||
|
<Image.PreviewGroup
|
||
|
preview={{
|
||
|
onChange: (current, prev) =>
|
||
|
console.log(`current index: ${current}, prev index: ${prev}`),
|
||
|
}}
|
||
|
>
|
||
|
<Image
|
||
|
width={200}
|
||
|
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
||
|
/>
|
||
|
<Image
|
||
|
width={200}
|
||
|
src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
|
||
|
/>
|
||
|
</Image.PreviewGroup>
|
||
|
</Modal>
|
||
|
</Modal>
|
||
|
</Modal>
|
||
|
</>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default App;
|