ant-design-vue/components/modal/demo/index.vue
2018-03-22 22:17:35 +08:00

65 lines
1.7 KiB
Vue

<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.
## Examples
`,
}
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;
}
</style>