mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-23 09:54:16 +08:00
fdb07d1864
Some checks failed
Publish Any Commit / build (push) Has been cancelled
🔀 Sync mirror to Gitee / mirror (push) Has been cancelled
✅ test / lint (push) Has been cancelled
✅ test / test-react-legacy (16, 1/2) (push) Has been cancelled
✅ test / test-react-legacy (16, 2/2) (push) Has been cancelled
✅ test / test-react-legacy (17, 1/2) (push) Has been cancelled
✅ test / test-react-legacy (17, 2/2) (push) Has been cancelled
✅ test / test-node (push) Has been cancelled
✅ test / test-react-latest (dom, 1/2) (push) Has been cancelled
✅ test / test-react-latest (dom, 2/2) (push) Has been cancelled
✅ test / build (push) Has been cancelled
✅ test / test lib/es module (es, 1/2) (push) Has been cancelled
✅ test / test lib/es module (es, 2/2) (push) Has been cancelled
✅ test / test lib/es module (lib, 1/2) (push) Has been cancelled
✅ test / test lib/es module (lib, 2/2) (push) Has been cancelled
👁️ Visual Regression Persist Start / test image (push) Has been cancelled
✅ test / test-react-latest-dist (dist, 1/2) (push) Has been cancelled
✅ test / test-react-latest-dist (dist, 2/2) (push) Has been cancelled
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Has been cancelled
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Has been cancelled
✅ test / test-coverage (push) Has been cancelled
* feat: Modal support responsive width * docs: update doc * test: update snapshot
55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Button, Flex, Modal } from 'antd';
|
|
|
|
const App: React.FC = () => {
|
|
const [open, setOpen] = useState(false);
|
|
const [openResponsive, setOpenResponsive] = useState(false);
|
|
|
|
return (
|
|
<Flex vertical gap="middle" align="flex-start">
|
|
{/* Basic */}
|
|
<Button type="primary" onClick={() => setOpen(true)}>
|
|
Open Modal of 1000px width
|
|
</Button>
|
|
<Modal
|
|
title="Modal 1000px width"
|
|
centered
|
|
open={open}
|
|
onOk={() => setOpen(false)}
|
|
onCancel={() => setOpen(false)}
|
|
width={1000}
|
|
>
|
|
<p>some contents...</p>
|
|
<p>some contents...</p>
|
|
<p>some contents...</p>
|
|
</Modal>
|
|
|
|
{/* Responsive */}
|
|
<Button type="primary" onClick={() => setOpenResponsive(true)}>
|
|
Open Modal of responsive width
|
|
</Button>
|
|
<Modal
|
|
title="Modal responsive width"
|
|
centered
|
|
open={openResponsive}
|
|
onOk={() => setOpenResponsive(false)}
|
|
onCancel={() => setOpenResponsive(false)}
|
|
width={{
|
|
xs: '90%',
|
|
sm: '80%',
|
|
md: '70%',
|
|
lg: '60%',
|
|
xl: '50%',
|
|
xxl: '40%',
|
|
}}
|
|
>
|
|
<p>some contents...</p>
|
|
<p>some contents...</p>
|
|
<p>some contents...</p>
|
|
</Modal>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default App;
|