ant-design-vue/components/button/demo/index.vue

58 lines
1.4 KiB
Vue
Raw Normal View History

2017-11-03 10:46:18 +00:00
<script>
2018-01-24 14:53:45 +00:00
import Basic from './basic'
2017-11-03 10:46:18 +00:00
import ButtonGroup from './button-group'
import Disabled from './disabled'
import Ghost from './ghost'
import Icon from './icon'
import Loading from './loading'
import Multiple from './multiple'
import Size from './size'
2018-01-24 07:39:21 +00:00
import CN from '../index.zh-CN.md'
import US from '../index.en-US.md'
2018-01-25 09:51:23 +00:00
const md = {
cn: `# Button 按钮
2018-01-24 07:39:21 +00:00
按钮用于开始一个即时操作
## 何时使用
标记了一个或封装一组操作命令响应用户点击行为触发相应的业务逻辑
## 代码演示`,
2018-01-25 09:51:23 +00:00
us: `# Button
2018-01-24 07:39:21 +00:00
To trigger an operation.
## When To Use
A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
`,
2018-01-25 09:51:23 +00:00
}
export default {
render () {
2018-01-24 07:39:21 +00:00
return (
<div>
2018-01-25 09:51:23 +00:00
<md cn={md.cn} us={md.us}/>
2018-01-24 07:39:21 +00:00
<Basic />
<ButtonGroup />
<Disabled />
<Ghost />
2018-01-24 14:53:45 +00:00
<Icon/>
2018-01-24 07:39:21 +00:00
<Loading />
<h1>TODO Multiple</h1>
<Multiple />
<Size />
<api>
<template slot='cn'>
<CN/>
</template>
2018-01-25 08:29:23 +00:00
<US/>
2018-01-24 07:39:21 +00:00
</api>
</div>
)
2017-11-03 10:46:18 +00:00
},
}
</script>
2018-01-23 10:55:39 +00:00
<style>
[id^="components-button-demo-"] .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
[id^="components-button-demo-"] .ant-btn-group > .ant-btn {
margin-right: 0;
}
</style>