fix button demo

components/button/demo/basic.vue

@@ -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>

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>
+```

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>
+```

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>
+```

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>
+```

components/button/demo/icon.vue

@@ -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>

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 />

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>
+```

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>
+```

components/button/demo/multiple.vue

@@ -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>

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>
+```

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 {

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,

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'),