mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 07:09:55 +08:00
7fd093bd0a
* docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type
1.5 KiB
1.5 KiB
| order | title | ||||
|---|---|---|---|---|---|
| 7 |
|
zh-CN
使用 centered 或类似 style.top 的样式来设置对话框位置。
en-US
You can use centered,style.top or other styles to set position of modal dialog.
import React, { useState } from 'react';
import { Modal, Button } from 'antd';
const App: React.FC = () => {
const [modal1Visible, setModal1Visible] = useState(false);
const [modal2Visible, setModal2Visible] = useState(false);
return (
<>
<Button type="primary" onClick={() => setModal1Visible(true)}>
Display a modal dialog at 20px to Top
</Button>
<Modal
title="20px to Top"
style={{ top: 20 }}
visible={modal1Visible}
onOk={() => setModal1Visible(false)}
onCancel={() => setModal1Visible(false)}
>
<p>some contents...</p>
<p>some contents...</p>
<p>some contents...</p>
</Modal>
<br />
<br />
<Button type="primary" onClick={() => setModal2Visible(true)}>
Vertically centered modal dialog
</Button>
<Modal
title="Vertically centered modal dialog"
centered
visible={modal2Visible}
onOk={() => setModal2Visible(false)}
onCancel={() => setModal2Visible(false)}
>
<p>some contents...</p>
<p>some contents...</p>
<p>some contents...</p>
</Modal>
</>
);
};
export default App;