From 2b6496d0f1fa2a966e20ca68cda5b81a7b1695b8 Mon Sep 17 00:00:00 2001
From: tjz <415800467@qq.com>
Date: Wed, 24 Jan 2018 22:53:45 +0800
Subject: [PATCH] fix button demo

---
 components/button/demo/basic.vue              |  8 ------
 .../{button-group.vue => button-group.md}     | 14 ++++++++++
 .../button/demo/{disabled.vue => disabled.md} | 13 ++++++++++
 .../button/demo/{ghost.vue => ghost.md}       | 11 ++++++++
 components/button/demo/icon.md                | 26 +++++++++++++++++++
 components/button/demo/icon.vue               | 13 ----------
 components/button/demo/index.vue              |  4 +--
 .../button/demo/{loading.vue => loading.md}   | 12 +++++++++
 components/button/demo/multiple.md            | 21 +++++++++++++++
 components/button/demo/multiple.vue           |  9 -------
 components/button/demo/{size.vue => size.md}  | 14 ++++++++++
 components/icon/icon.vue                      |  4 +--
 examples/components/demoBox.vue               |  1 +
 webpack.base.config.js                        |  6 ++---
 14 files changed, 118 insertions(+), 38 deletions(-)
 delete mode 100644 components/button/demo/basic.vue
 rename components/button/demo/{button-group.vue => button-group.md} (74%)
 rename components/button/demo/{disabled.vue => disabled.md} (65%)
 rename components/button/demo/{ghost.vue => ghost.md} (53%)
 create mode 100644 components/button/demo/icon.md
 delete mode 100644 components/button/demo/icon.vue
 rename components/button/demo/{loading.vue => loading.md} (74%)
 create mode 100644 components/button/demo/multiple.md
 delete mode 100644 components/button/demo/multiple.vue
 rename components/button/demo/{size.vue => size.md} (70%)

diff --git a/components/button/demo/basic.vue b/components/button/demo/basic.vue
deleted file mode 100644
index d2deb5fb8..000000000
--- a/components/button/demo/basic.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div>
-    <a-button type="primary">Primary</a-button>
-    <a-button>Default</a-button>
-    <a-button type="dashed">Dashed</a-button>
-    <a-button type="danger">Danger</a-button>
-  </div>
-</template>
diff --git a/components/button/demo/button-group.vue b/components/button/demo/button-group.md
similarity index 74%
rename from components/button/demo/button-group.vue
rename to components/button/demo/button-group.md
index 678fff8d5..78c14db1c 100644
--- a/components/button/demo/button-group.vue
+++ b/components/button/demo/button-group.md
@@ -1,3 +1,16 @@
+<cn>
+#### 按钮组合
+可以将多个 `Button` 放入 `Button.Group` 的容器中。
+通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。
+</cn>
+
+<us>
+#### Button Group
+Buttons can be grouped by placing multiple `Button` components into a `Button.Group`.
+The `size` can be set to `large`, `small` or left unset resulting in a default size.
+</us>
+
+```html
 <template>
   <div id="components-button-demo-button-group">
     <h4>Basic</h4>
@@ -46,3 +59,4 @@
   margin-right: 8px;
 }
 </style>
+```
diff --git a/components/button/demo/disabled.vue b/components/button/demo/disabled.md
similarity index 65%
rename from components/button/demo/disabled.vue
rename to components/button/demo/disabled.md
index 4703665c8..081e3e83f 100644
--- a/components/button/demo/disabled.vue
+++ b/components/button/demo/disabled.md
@@ -1,3 +1,15 @@
+
+<cn>
+#### 不可用状态
+添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变。
+</cn>
+
+<us>
+#### Disabled
+To mark a button as disabled, add the `disabled` property to the `Button`.
+</us>
+
+```html
 <template>
   <div>
     <a-button type="primary">Primary</a-button>
@@ -13,3 +25,4 @@
     <a-button type="dashed" disabled>Dashed(disabled)</a-button>
   </div>
 </template>
+```
diff --git a/components/button/demo/ghost.vue b/components/button/demo/ghost.md
similarity index 53%
rename from components/button/demo/ghost.vue
rename to components/button/demo/ghost.md
index 1b837f01f..25d9a2662 100644
--- a/components/button/demo/ghost.vue
+++ b/components/button/demo/ghost.md
@@ -1,3 +1,13 @@
+<cn>
+#### 幽灵按钮
+幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上。
+</cn>
+
+<us>
+#### Ghost Button
+`ghost` property will make button's background transparent, it is common used in colored background.
+</us>
+```html
 <template>
   <div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
     <a-button type="primary" ghost>Primary</a-button>
@@ -6,3 +16,4 @@
     <a-button type="danger" ghost>danger</a-button>
   </div>
 </template>
+```
diff --git a/components/button/demo/icon.md b/components/button/demo/icon.md
new file mode 100644
index 000000000..caf2b311b
--- /dev/null
+++ b/components/button/demo/icon.md
@@ -0,0 +1,26 @@
+<cn>
+#### 图标按钮
+当需要在 `Button` 内嵌入 `Icon` 时，可以设置 `icon` 属性，或者直接在 `Button` 内使用 `Icon` 组件。
+如果想控制 `Icon` 具体的位置，只能直接使用 `Icon` 组件，而非 `icon` 属性。
+</cn>
+
+<us>
+#### Icon
+`Button` components can contain an `Icon`. This is done by setting the `icon` property or placing an `Icon` component within the `Button`
+If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property.
+</us>
+
+```html
+<template>
+  <div>
+    <a-button type="primary" shape="circle" icon="search"></a-button>
+    <a-button type="primary" icon="search">Search</a-button>
+    <a-button shape="circle" icon="search" />
+    <a-button icon="search">Search</a-button>
+    <a-button shape="circle" icon="search" />
+    <a-button icon="search">Search</a-button>
+    <a-button type="dashed" shape="circle" icon="search" />
+    <a-button type="dashed" icon="search">Search</a-button>
+  </div>
+</template>
+```
diff --git a/components/button/demo/icon.vue b/components/button/demo/icon.vue
deleted file mode 100644
index 758b853c4..000000000
--- a/components/button/demo/icon.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div>
-    <a-button type="primary" shape="circle" icon="search" />
-    <a-button type="primary" icon="search">Search</a-button>
-    <a-button shape="circle" icon="search" />
-    <a-button icon="search">Search</a-button>
-    <br />
-    <a-button shape="circle" icon="search" />
-    <a-button icon="search">Search</a-button>
-    <a-button type="dashed" shape="circle" icon="search" />
-    <a-button type="dashed" icon="search">Search</a-button>
-  </div>
-</template>
diff --git a/components/button/demo/index.vue b/components/button/demo/index.vue
index 09ab334db..4937897eb 100644
--- a/components/button/demo/index.vue
+++ b/components/button/demo/index.vue
@@ -1,5 +1,5 @@
 <script>
-import Basic from './basic.md'
+import Basic from './basic'
 import ButtonGroup from './button-group'
 import Disabled from './disabled'
 import Ghost from './ghost'
@@ -30,7 +30,7 @@ export default {
         <ButtonGroup />
         <Disabled />
         <Ghost />
-        <Icon />
+        <Icon/>
         <Loading />
         <h1>TODO ： Multiple</h1>
         <Multiple />
diff --git a/components/button/demo/loading.vue b/components/button/demo/loading.md
similarity index 74%
rename from components/button/demo/loading.vue
rename to components/button/demo/loading.md
index 81ce18b3f..3cda8a2e3 100644
--- a/components/button/demo/loading.vue
+++ b/components/button/demo/loading.md
@@ -1,3 +1,14 @@
+<cn>
+#### 加载中状态
+添加 `loading` 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。
+</cn>
+
+<us>
+#### Loading
+A loading indicator can be added to a button by setting the `loading` property on the `Button`.
+</us>
+
+```html
 <template>
   <div>
     <a-button type="primary" loading>
@@ -36,3 +47,4 @@ export default {
   },
 }
 </script>
+```
diff --git a/components/button/demo/multiple.md b/components/button/demo/multiple.md
new file mode 100644
index 000000000..da4045e54
--- /dev/null
+++ b/components/button/demo/multiple.md
@@ -0,0 +1,21 @@
+<cn>
+#### 多个按钮组合
+按钮组合使用时，推荐使用1个主操作 + n 个次操作，3个以上操作时把更多操作放到 `Dropdown.Button` 中组合使用。
+</cn>
+
+<us>
+#### Multiple Buttons
+If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into `Dropdown.Button`.
+</us>
+
+```html
+// TODO: 依赖组件开发中
+<template>
+  <div>
+    <a-button type="primary">Primary</a-button>
+    <a-button>Default</a-button>
+    <a-button type="dashed">Dashed</a-button>
+    <a-button type="danger">Danger</a-button>
+  </div>
+</template>
+```
diff --git a/components/button/demo/multiple.vue b/components/button/demo/multiple.vue
deleted file mode 100644
index ab88c92aa..000000000
--- a/components/button/demo/multiple.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-// TODO: 依赖组件开发中
-<template>
-  <div>
-    <a-button type="primary">Primary</a-button>
-    <a-button>Default</a-button>
-    <a-button type="dashed">Dashed</a-button>
-    <a-button type="danger">Danger</a-button>
-  </div>
-</template>
diff --git a/components/button/demo/size.vue b/components/button/demo/size.md
similarity index 70%
rename from components/button/demo/size.vue
rename to components/button/demo/size.md
index e1e6b65e3..0b290eaa2 100644
--- a/components/button/demo/size.vue
+++ b/components/button/demo/size.md
@@ -1,3 +1,16 @@
+<cn>
+#### 按钮尺寸
+按钮有大、中、小三种尺寸。
+通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
+</cn>
+
+<us>
+#### Size
+Ant Design supports a default button size as well as a large and small size.
+If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size.
+</us>
+
+```html
 <template>
   <div>
     <a-radio-group :value="size" @change="handleSizeChange">
@@ -38,3 +51,4 @@ export default {
   },
 }
 </script>
+```
\ No newline at end of file
diff --git a/components/icon/icon.vue b/components/icon/icon.vue
index f10e02b4e..5526a4563 100644
--- a/components/icon/icon.vue
+++ b/components/icon/icon.vue
@@ -1,7 +1,5 @@
 <template>
-  <i :title="title" :class="classes"
-    @click="handleClick">
-  </i>
+  <i :title="title" :class="classes" @click="handleClick"></i>
 </template>
 <script>
 export default {
diff --git a/examples/components/demoBox.vue b/examples/components/demoBox.vue
index b9a84c132..4b3b66264 100644
--- a/examples/components/demoBox.vue
+++ b/examples/components/demoBox.vue
@@ -21,6 +21,7 @@ export default {
     jsfiddle: Object,
   },
   data () {
+    console.log(this.jsfiddle.html)
     const { lang } = this.$route.params
     return {
       isOpen: false,
diff --git a/webpack.base.config.js b/webpack.base.config.js
index 89c2a54bf..62b9cec91 100644
--- a/webpack.base.config.js
+++ b/webpack.base.config.js
@@ -60,9 +60,9 @@ md.renderer.rules.table_open = function () {
   return '<table class="table">'
 }
 md.renderer.rules.fence = wrap(md.renderer.rules.fence)
+const cnReg = new RegExp('<(cn)(?:[^<]|<)+</\\1>', 'g')
+const usReg = new RegExp('<(us)(?:[^<]|<)+</\\1>', 'g')
 md.core.ruler.push('update_template', function replace ({ tokens }) {
-  const cnReg = new RegExp('<(cn)(?:[^<]|<)+</\\1>', 'g')
-  const usReg = new RegExp('<(us)(?:[^<]|<)+</\\1>', 'g')
   let cn = ''
   let us = ''
   let template = ''
@@ -154,7 +154,7 @@ module.exports = {
     ],
   },
   resolve: {
-    extensions: ['.js', '.vue'],
+    extensions: ['.js', '.vue', '.md'],
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
       'antd': path.join(__dirname, 'components'),