|
|
|
|
|
<script>
|
|
|
|
|
|
import Async from './async'
|
|
|
|
|
|
import Basic from './basic'
|
|
|
|
|
|
import ConfirmPromise from './confirm-promise'
|
|
|
|
|
|
import Confirm from './confirm'
|
|
|
|
|
|
import Footer from './footer'
|
|
|
|
|
|
import Info from './info'
|
|
|
|
|
|
import Locale from './locale'
|
|
|
|
|
|
import Manual from './manual'
|
|
|
|
|
|
import Position from './position'
|
|
|
|
|
|
|
|
|
|
|
|
import CN from '../index.zh-CN.md'
|
|
|
|
|
|
import US from '../index.en-US.md'
|
|
|
|
|
|
const md = {
|
|
|
|
|
|
cn: `# Modal 对话框
|
|
|
|
|
|
模态对话框。
|
|
|
|
|
|
## 何时使用
|
|
|
|
|
|
需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 \`Modal\` 在当前页面正中打开一个浮层，承载相应的操作。
|
|
|
|
|
|
另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 \`antd.Modal.confirm()\` 等方法。
|
|
|
|
|
|
## 代码演示`,
|
|
|
|
|
|
us: `# Modal
|
|
|
|
|
|
Modal dialogs.
|
|
|
|
|
|
## When To Use
|
|
|
|
|
|
When requiring users to interact with the application, but without jumping to a new page and interrupting
|
|
|
|
|
|
the user's workflow, you can use \`Modal\` to create a new floating layer over the current page to get user
|
|
|
|
|
|
feedback or display information.
|
|
|
|
|
|
Additionally, if you need show a simple confirmation dialog, you can use \`antd.Modal.confirm()\`,
|
|
|
|
|
|
and so on.
|
|
|
|
|
|
`,
|
|
|
|
|
|
}
|
|
|
|
|
|
export default {
|
|
|
|
|
|
type: 'Feedback',
|
|
|
|
|
|
category: 'Components',
|
|
|
|
|
|
subtitle: '对话框',
|
|
|
|
|
|
title: 'Modal',
|
|
|
|
|
|
render () {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div id='components-modal-demo'>
|
|
|
|
|
|
<md cn={md.cn} us={md.us}/>
|
|
|
|
|
|
<Async/>
|
|
|
|
|
|
<Basic/>
|
|
|
|
|
|
<ConfirmPromise/>
|
|
|
|
|
|
<Confirm/>
|
|
|
|
|
|
<Footer/>
|
|
|
|
|
|
<Info/>
|
|
|
|
|
|
<Locale/>
|
|
|
|
|
|
<Manual/>
|
|
|
|
|
|
<Position/>
|
|
|
|
|
|
<api>
|
|
|
|
|
|
<CN slot='cn' />
|
|
|
|
|
|
<US/>
|
|
|
|
|
|
</api>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
#components-modal-demo .ant-btn {
|
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.vertical-center-modal {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.vertical-center-modal:before {
|
|
|
|
|
|
content: '';
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
width: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.vertical-center-modal .ant-modal {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
