From 1a12427bfb8276d7b8b707cc1bf00966b8499d4f Mon Sep 17 00:00:00 2001
From: tjz <415800467@qq.com>
Date: Mon, 16 Apr 2018 21:54:37 +0800
Subject: [PATCH] add popover doc

---
 .../popover/demo/arrow-point-at-center.md     | 32 +++++++++
 .../popover/demo/arrow-point-at-center.vue    | 34 ---------
 .../popover/demo/{basic.vue => basic.md}      | 32 ++++-----
 .../popover/demo/{control.vue => control.md}  | 27 ++++----
 components/popover/demo/index.vue             | 63 +++++++++++------
 .../demo/{placement.vue => placement.md}      | 69 ++++++++++---------
 .../demo/{triggerType.vue => triggerType.md}  | 38 +++++-----
 components/popover/index.en-US.md             | 13 ++++
 components/popover/index.zh-CN.md             | 20 +-----
 9 files changed, 173 insertions(+), 155 deletions(-)
 create mode 100644 components/popover/demo/arrow-point-at-center.md
 delete mode 100644 components/popover/demo/arrow-point-at-center.vue
 rename components/popover/demo/{basic.vue => basic.md} (54%)
 rename components/popover/demo/{control.vue => control.md} (61%)
 rename components/popover/demo/{placement.vue => placement.md} (80%)
 rename components/popover/demo/{triggerType.vue => triggerType.md} (60%)
 create mode 100644 components/popover/index.en-US.md

diff --git a/components/popover/demo/arrow-point-at-center.md b/components/popover/demo/arrow-point-at-center.md
new file mode 100644
index 000000000..c9adf17bf
--- /dev/null
+++ b/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>
+```
diff --git a/components/popover/demo/arrow-point-at-center.vue b/components/popover/demo/arrow-point-at-center.vue
deleted file mode 100644
index a05855424..000000000
--- a/components/popover/demo/arrow-point-at-center.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-<div>
-<md>
-## 箭头指向
-设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
-</md>
-  <Popover placement="topLeft">
-    <template slot="content">
-      <p>Content</p>
-      <p>Content</p>
-    </template>
-    <span slot="title">Title</span>
-    <a-button>Align edge / 边缘对齐</a-button>
-  </Popover>
-  <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>
-  </Popover>
-</div>
-</template>
-
-<script>
-import { Popover, Button } from 'antd'
-export default {
-  components: {
-    Popover,
-
-  },
-}
-</script>
diff --git a/components/popover/demo/basic.vue b/components/popover/demo/basic.md
similarity index 54%
rename from components/popover/demo/basic.vue
rename to components/popover/demo/basic.md
index 991b33d11..3acb7485e 100644
--- a/components/popover/demo/basic.vue
+++ b/components/popover/demo/basic.md
@@ -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>
+```
diff --git a/components/popover/demo/control.vue b/components/popover/demo/control.md
similarity index 61%
rename from components/popover/demo/control.vue
rename to components/popover/demo/control.md
index 52ab814d5..14a5e0aaa 100644
--- a/components/popover/demo/control.vue
+++ b/components/popover/demo/control.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>
+```
diff --git a/components/popover/demo/index.vue b/components/popover/demo/index.vue
index 67db0aa33..18201bdbc 100644
--- a/components/popover/demo/index.vue
+++ b/components/popover/demo/index.vue
@@ -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>
diff --git a/components/popover/demo/placement.vue b/components/popover/demo/placement.md
similarity index 80%
rename from components/popover/demo/placement.vue
rename to components/popover/demo/placement.md
index e1a8ef95a..bb69f2770 100644
--- a/components/popover/demo/placement.vue
+++ b/components/popover/demo/placement.md
@@ -1,11 +1,18 @@
+<cn>
+#### 位置
+位置有十二个方向。
+</cn>
+
+<us>
+#### Placement
+There are 12 `placement` options available.
+</us>
+
+```html
 <template>
 <div id="components-popover-demo-placement">
-<md>
-## 位置
-位置有 12 个方向。
-</md>
   <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
-    <Popover placement="topLeft">
+    <a-popover placement="topLeft">
       <template slot="content">
         <p>Content</p>
         <p>Content</p>
@@ -14,8 +21,8 @@
         <span>Title</span>
       </template>
       <a-button>TL</a-button>
-    </Popover>
-    <Popover placement="top">
+    </a-popover>
+    <a-popover placement="top">
       <template slot="content">
         <p>Content</p>
         <p>Content</p>
@@ -24,8 +31,8 @@
         <span>Title</span>
       </template>
       <a-button>Top</a-button>
-    </Popover>
-    <Popover placement="topRight">
+    </a-popover>
+    <a-popover placement="topRight">
       <template slot="content">
         <p>Content</p>
         <p>Content</p>
@@ -34,10 +41,10 @@
         <span>Title</span>
       </template>
       <a-button>TR</a-button>
-    </Popover>
+    </a-popover>
   </div>
   <div :style="{ width: `${buttonWidth}px`, float: 'left' }">
-    <Popover placement="leftTop">
+    <a-popover placement="leftTop">
       <template slot="content">
         <p>Content</p>
         <p>Content</p>
@@ -46,8 +53,8 @@
         <span>Title</span>
       </template>
       <a-button>LT</a-button>
-    </Popover>
-    <Popover placement="left">
+    </a-popover>
+    <a-popover placement="left">
       <template slot="content">
         <p>Content</p>
         <p>Content</p>
@@ -56,8 +63,8 @@
         <span>Title</span>
       </template>
       <a-button>Left</a-button>
-    </Popover>
-    <Popover placement="leftBottom">
+    </a-popover>
+    <a-popover placement="leftBottom">
       <template slot="content">
         <p>Content</p>
         <p>Content</p>
@@ -66,10 +73,10 @@
         <span>Title</span>
       </template>
       <a-button>LB</a-button>
-    </Popover>
+    </a-popover>
   </div>
   <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
-    <Popover placement="rightTop">
+    <a-popover placement="rightTop">
       <template slot="content">
         <p>Content</p>
         <p>Content</p>
@@ -78,8 +85,8 @@
         <span>Title</span>
       </template>
       <a-button>RT</a-button>
-    </Popover>
-    <Popover placement="right">
+    </a-popover>
+    <a-popover placement="right">
       <template slot="content">
         <p>Content</p>
         <p>Content</p>
@@ -88,8 +95,8 @@
         <span>Title</span>
       </template>
       <a-button>Right</a-button>
-    </Popover>
-    <Popover placement="rightBottom">
+    </a-popover>
+    <a-popover placement="rightBottom">
       <template slot="content">
         <p>Content</p>
         <p>Content</p>
@@ -98,10 +105,10 @@
         <span>Title</span>
       </template>
       <a-button>RB</a-button>
-    </Popover>
+    </a-popover>
   </div>
   <div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
-    <Popover placement="bottomLeft">
+    <a-popover placement="bottomLeft">
       <template slot="content">
         <p>Content</p>
         <p>Content</p>
@@ -110,8 +117,8 @@
         <span>Title</span>
       </template>
       <a-button>BL</a-button>
-    </Popover>
-    <Popover placement="bottom">
+    </a-popover>
+    <a-popover placement="bottom">
       <template slot="content">
         <p>Content</p>
         <p>Content</p>
@@ -120,8 +127,8 @@
         <span>Title</span>
       </template>
       <a-button>Bottom</a-button>
-    </Popover>
-    <Popover placement="bottomRight">
+    </a-popover>
+    <a-popover placement="bottomRight">
       <template slot="content">
         <p>Content</p>
         <p>Content</p>
@@ -130,23 +137,18 @@
         <span>Title</span>
       </template>
       <a-button>BR</a-button>
-    </Popover>
+    </a-popover>
   </div>
 </div>
 </template>
 
 <script>
-import { Popover, Button } from 'antd'
 export default {
   data () {
     return {
       buttonWidth: 70,
     }
   },
-  components: {
-    Popover,
-
-  },
 }
 </script>
 <style>
@@ -158,3 +160,4 @@ export default {
   margin-bottom: 8px;
 }
 </style>
+```
diff --git a/components/popover/demo/triggerType.vue b/components/popover/demo/triggerType.md
similarity index 60%
rename from components/popover/demo/triggerType.vue
rename to components/popover/demo/triggerType.md
index a466cbccb..ab36d00ca 100644
--- a/components/popover/demo/triggerType.vue
+++ b/components/popover/demo/triggerType.md
@@ -1,39 +1,37 @@
+<cn>
+#### 三种触发方式
+鼠标移入、聚集、点击。
+</cn>
+
+<us>
+#### Three ways to trigger
+Mouse to click, focus and move in.
+</us>
+
+```html
 <template>
 <div>
-<md>
-## 三种触发方式
-鼠标移入、聚集、点击。
-</md>
-  <Popover title="Title" trigger="hover">
+  <a-popover title="Title" trigger="hover">
     <template slot="content">
       <p>Content</p>
       <p>Content</p>
     </template>
     <a-button type="primary">Hover me</a-button>
-  </Popover>
-  <Popover title="Title" trigger="focus">
+  </a-popover>
+  <a-popover title="Title" trigger="focus">
     <template slot="content">
       <p>Content</p>
       <p>Content</p>
     </template>
     <a-button type="primary">Focus me</a-button>
-  </Popover>
-  <Popover title="Title" trigger="click">
+  </a-popover>
+  <a-popover title="Title" trigger="click">
     <template slot="content">
       <p>Content</p>
       <p>Content</p>
     </template>
     <a-button type="primary">Click me</a-button>
-  </Popover>
+  </a-popover>
 </div>
 </template>
-
-<script>
-import { Popover, Button } from 'antd'
-export default {
-  components: {
-    Popover,
-
-  },
-}
-</script>
+```
diff --git a/components/popover/index.en-US.md b/components/popover/index.en-US.md
new file mode 100644
index 000000000..8084fd299
--- /dev/null
+++ b/components/popover/index.en-US.md
@@ -0,0 +1,13 @@
+
+## API
+
+| Param | Description | Type | Default value |
+| ----- | ----------- | ---- | ------------- |
+| content | Content of the card | string\|slot\|vNode | - |
+| title | Title of the card | string\|slot\VNode | - |
+
+Consult [Tooltip's documentation](/ant-design/components/tooltip/#API) to find more APIs.
+
+## Note
+
+Please ensure that the child node of `Popover` accepts `onMouseenter`, `onMouseleave`, `onFocus`, `onClick` events.
diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md
index 6bcd9d244..f601980c0 100644
--- a/components/popover/index.zh-CN.md
+++ b/components/popover/index.zh-CN.md
@@ -1,26 +1,12 @@
----
-category: Components
-subtitle: 气泡卡片
-type: Data Display
-title: Popover
----
-
-点击/鼠标移入元素，弹出气泡式的卡片浮层。
-
-## 何时使用
-
-当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
-
-和 `Tooltip` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。
 
 ## API
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| content | 卡片内容 | string\|function\|slot | 无 |
-| title | 卡片标题 | string\|function\|slot | 无 |
+| content | 卡片内容 | string\|slot\|VNode | 无 |
+| title | 卡片标题 | string\|slot\|VNode | 无 |
 
-更多属性请参考 [Tooltip](#/cn/components/tooltip/API)。
+更多属性请参考 [Tooltip](/ant-design/components/tooltip-cn/#API)。
 
 ## 注意