add popover doc

Author: tangjinzhou

components/popover/demo/arrow-point-at-center.md

@@ -0,0 +1,32 @@
+<cn>
+#### 箭头指向
+设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
+</cn>
+
+<us>
+#### Arrow pointing
+The arrow points to the center of the target element, which set `arrowPointAtCenter`.
+</us>
+
+```html
+<template>
+  <div>
+    <a-popover placement="topLeft">
+      <template slot="content">
+        <p>Content</p>
+        <p>Content</p>
+      </template>
+      <span slot="title">Title</span>
+      <a-button>Align edge / 边缘对齐</a-button>
+    </a-popover>
+    <a-popover placement="topLeft" arrowPointAtCenter>
+      <template slot="content">
+        <p>Content</p>
+        <p>Content</p>
+      </template>
+      <span slot="title">Title</span>
+      <a-button>Arrow points to center / 箭头指向中心</a-button>
+    </a-popover>
+  </div>
+</template>
+```

components/popover/demo/arrow-point-at-center.vue

@@ -1,25 +1,21 @@
-<template>
-<div>
-<md>
-## 基本
+<cn>
+#### 基本
 最简单的用法，浮层的大小由内容区域决定。
-</md>
-<Popover title="Title">
+</cn>
+
+<us>
+#### Basic
+The most basic example. The size of the floating layer depends on the contents region.
+</us>
+
+```html
+<template>
+  <a-popover title="Title">
     <template slot="content">
       <p>Content</p>
       <p>Content</p>
     </template>
     <a-button type="primary">Hover me</a-button>
-  </Popover>
-</div>
+  </a-popover>
 </template>
-
-<script>
-import { Popover, Button } from 'antd'
-export default {
-  components: {
-    Popover,
-
-  },
-}
-</script>
+```

components/popover/demo/basic.vue renamed to components/popover/demo/basic.md

@@ -1,22 +1,26 @@
+<cn>
+#### 从浮层内关闭
+使用 `visible` 属性控制浮层显示。
+</cn>
+
+<us>
+#### Controlling the close of the dialog
+Use `visible` prop to control the display of the card.
+</us>
+
+```html
 <template>
-<div>
-  <md>
-  ## 从浮层内关闭
-  使用 `visible` 属性控制浮层显示。
-  </md>
-  <Popover
+  <a-popover
     title="Title"
     trigger="click"
     v-model="visible"
   >
     <a @click="hide" slot="content">Close</a>
     <a-button type="primary">Click me</a-button>
-  </Popover>
-</div>
+  </a-popover>
 </template>
 
 <script>
-import { Popover, Button } from 'antd'
 export default {
   data () {
     return {
@@ -29,9 +33,6 @@ export default {
       this.visible = false
     },
   },
-  components: {
-    Popover,
-
-  },
 }
 </script>
+```

components/popover/demo/control.vue renamed to components/popover/demo/control.md

@@ -1,34 +1,57 @@
-<template>
-  <div>
-    <h1>Basic</h1>
-    <Basic />
-    <h1>ArrowCenter</h1>
-    <ArrowCenter />
-    <h1>Control</h1>
-    <Control />
-    <h1>Placement</h1>
-    <Placement />
-    <h1>TriggerType</h1>
-    <TriggerType />
-  </div>
-</template>
 <script>
 import Basic from './basic'
 import ArrowCenter from './arrow-point-at-center'
 import Control from './control'
 import Placement from './placement'
 import TriggerType from './triggerType'
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+
+const md = {
+  cn: `# Popover
+
+  点击/鼠标移入元素，弹出气泡式的卡片浮层。
+
+## 何时使用
+
+当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
+
+和 \`Tooltip\` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。
+            ## 代码演示`,
+  us: `# Popover
+
+  The floating card popped by clicking or hovering.
+
+## When To Use
+
+A simple popup menu to provide extra information or operations.
+
+Comparing with \`Tooltip\`, besides information \`Popover\` card can also provide action elements like links and buttons.
+## Examples
+  `,
+}
 export default {
   category: 'Components',
   subtitle: '气泡卡片',
   type: 'Data Display',
   title: 'Popover',
-  components: {
-    Basic,
-    ArrowCenter,
-    Control,
-    Placement,
-    TriggerType,
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <Basic />
+        <ArrowCenter />
+        <Control />
+        <Placement />
+        <TriggerType />
+        <api>
+          <template slot='cn'>
+            <CN/>
+          </template>
+          <US/>
+        </api>
+      </div>
+    )
   },
 }
 </script>