From 4c37abf8b5074a16b44c0f5038385d7cab9b3d62 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Tue, 8 May 2018 11:20:07 +0800
Subject: [PATCH] feat: add form doc

---
 ...advanced-search.md => advanced-search.vue} |   4 +-
 .../demo/{coordinated.md => coordinated.vue}  |   4 +-
 ...ntrols.md => customized-form-controls.vue} |   4 +-
 ...mic-form-item.md => dynamic-form-item.vue} |   4 +-
 .../{dynamic-rule.md => dynamic-rule.vue}     |   4 +-
 .../{form-in-modal.md => form-in-modal.vue}   |   4 +-
 .../{global-state.md => global-state.vue}     |   6 +-
 ...rizontal-login.md => horizontal-login.vue} |   4 +-
 components/form/demo/index.vue                | 122 ++++++++----
 .../form/demo/{layout.md => layout.vue}       |   6 +-
 .../{normal-login.md => normal-login.vue}     |   4 +-
 .../form/demo/{register.md => register.vue}   |   4 +-
 components/form/demo/test.vue                 | 185 ------------------
 ...-controls.md => time-related-controls.vue} |   4 +-
 .../{validate-other.md => validate-other.vue} |   6 +-
 ...validate-static.md => validate-static.vue} |   4 +-
 ...form-create.md => without-form-create.vue} |   4 +-
 components/form/index.en-US.md                |  59 ++----
 components/form/index.zh-CN.md                |  60 ++----
 site/components/demoBox.vue                   |   8 +-
 site/components/demoContainer.vue             |  81 ++++++++
 site/components/md.vue                        |  24 +--
 site/demo.js                                  |   1 +
 site/index.js                                 |   2 +
 site/routes.js                                | 128 ++++++------
 webpack.base.config.js                        |   3 +
 26 files changed, 324 insertions(+), 415 deletions(-)
 rename components/form/demo/{advanced-search.md => advanced-search.vue} (99%)
 rename components/form/demo/{coordinated.md => coordinated.vue} (99%)
 rename components/form/demo/{customized-form-controls.md => customized-form-controls.vue} (99%)
 rename components/form/demo/{dynamic-form-item.md => dynamic-form-item.vue} (99%)
 rename components/form/demo/{dynamic-rule.md => dynamic-rule.vue} (99%)
 rename components/form/demo/{form-in-modal.md => form-in-modal.vue} (99%)
 rename components/form/demo/{global-state.md => global-state.vue} (98%)
 rename components/form/demo/{horizontal-login.md => horizontal-login.vue} (99%)
 rename components/form/demo/{layout.md => layout.vue} (98%)
 rename components/form/demo/{normal-login.md => normal-login.vue} (99%)
 rename components/form/demo/{register.md => register.vue} (99%)
 delete mode 100644 components/form/demo/test.vue
 rename components/form/demo/{time-related-controls.md => time-related-controls.vue} (99%)
 rename components/form/demo/{validate-other.md => validate-other.vue} (98%)
 rename components/form/demo/{validate-static.md => validate-static.vue} (99%)
 rename components/form/demo/{without-form-create.md => without-form-create.vue} (99%)
 create mode 100644 site/components/demoContainer.vue

diff --git a/components/form/demo/advanced-search.md b/components/form/demo/advanced-search.vue
similarity index 99%
rename from components/form/demo/advanced-search.md
rename to components/form/demo/advanced-search.vue
index b8c5c43b2..8b4c30d92 100644
--- a/components/form/demo/advanced-search.md
+++ b/components/form/demo/advanced-search.vue
@@ -10,7 +10,7 @@ Three columns layout is often used for advanced searching of data table.
 Because the width of label is not fixed, you may need to adjust it by customizing its style.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -128,7 +128,7 @@ export default {
   padding-top: 80px;
 }
 </style>
-```
+
 
 
 
diff --git a/components/form/demo/coordinated.md b/components/form/demo/coordinated.vue
similarity index 99%
rename from components/form/demo/coordinated.md
rename to components/form/demo/coordinated.vue
index f57276ca2..33365f78a 100644
--- a/components/form/demo/coordinated.md
+++ b/components/form/demo/coordinated.vue
@@ -8,7 +8,7 @@
 Use `setFieldsValue` to set other control's value programmaticly.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -76,7 +76,7 @@ const CoordinatedForm = {
 
 export default Form.create()(CoordinatedForm)
 </script>
-```
+
 
 
 
diff --git a/components/form/demo/customized-form-controls.md b/components/form/demo/customized-form-controls.vue
similarity index 99%
rename from components/form/demo/customized-form-controls.md
rename to components/form/demo/customized-form-controls.vue
index aec358d5c..55cad02db 100644
--- a/components/form/demo/customized-form-controls.md
+++ b/components/form/demo/customized-form-controls.vue
@@ -14,7 +14,7 @@ Customized or third-party form controls can be used in Form, too. Controls must
 > * It must be a class component.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -123,7 +123,7 @@ const Demo = {
 
 export default Form.create()(Demo)
 </script>
-```
+
 
 
 
diff --git a/components/form/demo/dynamic-form-item.md b/components/form/demo/dynamic-form-item.vue
similarity index 99%
rename from components/form/demo/dynamic-form-item.md
rename to components/form/demo/dynamic-form-item.vue
index 91d6a5f40..dfcaa7027 100644
--- a/components/form/demo/dynamic-form-item.md
+++ b/components/form/demo/dynamic-form-item.vue
@@ -8,7 +8,7 @@
 Add or remove form items dynamically.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -138,7 +138,7 @@ export default Form.create()(DynamicFieldSet)
 }
 </style>
 
-```
+
 
 
 
diff --git a/components/form/demo/dynamic-rule.md b/components/form/demo/dynamic-rule.vue
similarity index 99%
rename from components/form/demo/dynamic-rule.md
rename to components/form/demo/dynamic-rule.vue
index 38648fe7b..fccac58ca 100644
--- a/components/form/demo/dynamic-rule.md
+++ b/components/form/demo/dynamic-rule.vue
@@ -8,7 +8,7 @@
 Perform different check rules according to different situations.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -88,7 +88,7 @@ const DynamicRule = {
 
 export default Form.create()(DynamicRule)
 </script>
-```
+
 
 
 
diff --git a/components/form/demo/form-in-modal.md b/components/form/demo/form-in-modal.vue
similarity index 99%
rename from components/form/demo/form-in-modal.md
rename to components/form/demo/form-in-modal.vue
index bade491cc..51173a81f 100644
--- a/components/form/demo/form-in-modal.md
+++ b/components/form/demo/form-in-modal.vue
@@ -8,7 +8,7 @@
 When user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fill in the form to create an item.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -99,7 +99,7 @@ export default {
   },
 }
 </script>
-```
+
 
 
 
diff --git a/components/form/demo/global-state.md b/components/form/demo/global-state.vue
similarity index 98%
rename from components/form/demo/global-state.md
rename to components/form/demo/global-state.vue
index b3d5a1f47..85bb31a3c 100644
--- a/components/form/demo/global-state.md
+++ b/components/form/demo/global-state.vue
@@ -9,12 +9,12 @@
 <us>
 #### Store Form Data into Upper Component
 We can store form data into upper component.
-**Note:** 
+**Note:**
 You must wrap field data with `Form.createFormField` in `mapPropsToFields`.
 The properties passed by the upper component must be declared in the props of `Form.create({ props: ...})`.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -86,7 +86,7 @@ export default {
   margin-top: 24px;
 }
 </style>
-```
+
 
 
 
diff --git a/components/form/demo/horizontal-login.md b/components/form/demo/horizontal-login.vue
similarity index 99%
rename from components/form/demo/horizontal-login.md
rename to components/form/demo/horizontal-login.vue
index f24b1add9..75c35a433 100644
--- a/components/form/demo/horizontal-login.md
+++ b/components/form/demo/horizontal-login.vue
@@ -8,7 +8,7 @@
 Horizontal login form is often used in navigation bar.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -76,7 +76,7 @@ const HorizontalLoginForm = {
 
 export default Form.create()(HorizontalLoginForm)
 </script>
-```
+
 
 
 
diff --git a/components/form/demo/index.vue b/components/form/demo/index.vue
index 040ee0a8b..e12c06e7b 100644
--- a/components/form/demo/index.vue
+++ b/components/form/demo/index.vue
@@ -1,25 +1,37 @@
 <script>
-
-// import AdvancedSearch from './advanced-search'
-// import Coordinated from './coordinated'
-// import CustomizedFormControls from './customized-form-controls'
-// import DynamicFormItem from './dynamic-form-item'
-// import DynamicRule from './dynamic-rule'
-// import FormInModal from './form-in-modal'
-// import GlobalState from './global-state'
-// import HorizontalLogin from './horizontal-login'
-// import Layout from './layout'
-// import NormalLogin from './normal-login'
-// import Register from './register'
-// import TimeRelatedControls from './time-related-controls'
-// import ValidateOther from './validate-other'
-// import ValidateStatic from './validate-static'
-// import WithoutFormCreate from './without-form-create'
-import Test from './test'
-import TestString from '!raw-loader!./test'
-
-import CN from './../index.zh-CN'
-import US from './../index.en-US'
+import AdvancedSearch from './advanced-search'
+import AdvancedSearchString from '!raw-loader!./advanced-search'
+import Coordinated from './coordinated'
+import CoordinatedString from '!raw-loader!./coordinated'
+import CustomizedFormControls from './customized-form-controls'
+import CustomizedFormControlsString from '!raw-loader!./customized-form-controls'
+import DynamicFormItem from './dynamic-form-item'
+import DynamicFormItemString from '!raw-loader!./dynamic-form-item'
+import DynamicRule from './dynamic-rule'
+import DynamicRuleString from '!raw-loader!./dynamic-rule'
+import FormInModal from './form-in-modal'
+import FormInModalString from '!raw-loader!./form-in-modal'
+import GlobalState from './global-state'
+import GlobalStateString from '!raw-loader!./global-state'
+import HorizontalLogin from './horizontal-login'
+import HorizontalLoginString from '!raw-loader!./horizontal-login'
+import Layout from './layout'
+import LayoutString from '!raw-loader!./layout'
+import NormalLogin from './normal-login'
+import NormalLoginString from '!raw-loader!./normal-login'
+import Register from './register'
+import RegisterString from '!raw-loader!./register'
+import TimeRelatedControls from './time-related-controls'
+import TimeRelatedControlsString from '!raw-loader!./time-related-controls'
+import ValidateOther from './validate-other'
+import ValidateOtherString from '!raw-loader!./validate-other'
+import ValidateStatic from './validate-static'
+import ValidateStaticString from '!raw-loader!./validate-static'
+import WithoutFormCreate from './without-form-create'
+import WithoutFormCreateString from '!raw-loader!./without-form-create'
+
+import CN from '../index.zh-CN'
+import US from '../index.en-US'
 
 const md = {
   cn: `# Form 表单
@@ -70,27 +82,54 @@ export default {
   cols: 1,
   title: 'Form',
   render () {
-    console.log(TestString)
     return (
       <div>
         <md cn={md.cn} us={md.us} />
-        <Test />
-        {/* <AdvancedSearch />
-        <Coordinated />
-        <CustomizedFormControls />
-        <DynamicFormItem />
-        <DynamicRule />
-        <FormInModal />
-        <GlobalState />
-        <HorizontalLogin />
-        <Layout />
-        <NormalLogin />
-        <Register />
-        <TimeRelatedControls />
-        <ValidateStatic />
-        <WithoutFormCreate />
-        <ValidateOther />
-        */}
+        <demo-container code={AdvancedSearchString}>
+          <AdvancedSearch />
+        </demo-container>
+        <demo-container code={CoordinatedString}>
+          <Coordinated />
+        </demo-container>
+        <demo-container code={CustomizedFormControlsString}>
+          <CustomizedFormControls />
+        </demo-container>
+        <demo-container code={DynamicFormItemString}>
+          <DynamicFormItem />
+        </demo-container>
+        <demo-container code={DynamicRuleString}>
+          <DynamicRule />
+        </demo-container>
+        <demo-container code={FormInModalString}>
+          <FormInModal />
+        </demo-container>
+        <demo-container code={GlobalStateString}>
+          <GlobalState />
+        </demo-container>
+        <demo-container code={HorizontalLoginString}>
+          <HorizontalLogin />
+        </demo-container>
+        <demo-container code={LayoutString}>
+          <Layout />
+        </demo-container>
+        <demo-container code={NormalLoginString}>
+          <NormalLogin />
+        </demo-container>
+        <demo-container code={RegisterString}>
+          <Register />
+        </demo-container>
+        <demo-container code={TimeRelatedControlsString}>
+          <TimeRelatedControls />
+        </demo-container>
+        <demo-container code={ValidateStaticString}>
+          <ValidateStatic />
+        </demo-container>
+        <demo-container code={WithoutFormCreateString}>
+          <WithoutFormCreate />
+        </demo-container>
+        <demo-container code={ValidateOtherString}>
+          <ValidateOther />
+        </demo-container>
         <api>
           <CN slot='cn' />
           <US />
@@ -100,3 +139,8 @@ export default {
   },
 }
 </script>
+<style>
+.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
+  max-width: 600px;
+}
+</style>
diff --git a/components/form/demo/layout.md b/components/form/demo/layout.vue
similarity index 98%
rename from components/form/demo/layout.md
rename to components/form/demo/layout.vue
index 174c860f4..80ce03c6b 100644
--- a/components/form/demo/layout.md
+++ b/components/form/demo/layout.vue
@@ -8,7 +8,7 @@
 There are three layout for form: `horizontal`, `vertical`, `inline`.
 </us>
 
-```html
+
 <template>
 <div>
   <a-form :layout="formLayout">
@@ -43,7 +43,7 @@ There are three layout for form: `horizontal`, `vertical`, `inline`.
       <a-button type='primary'>Submit</a-button>
     </a-form-item>
   </a-form>
-</div>  
+</div>
 </template>
 
 <script>
@@ -75,7 +75,7 @@ export default {
   },
 }
 </script>
-```
+
 
 
 
diff --git a/components/form/demo/normal-login.md b/components/form/demo/normal-login.vue
similarity index 99%
rename from components/form/demo/normal-login.md
rename to components/form/demo/normal-login.vue
index 039d9deee..4e80521c7 100644
--- a/components/form/demo/normal-login.md
+++ b/components/form/demo/normal-login.vue
@@ -8,7 +8,7 @@
 Normal login form which can contain more elements.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -73,7 +73,7 @@ export default Form.create()(NormalLoginForm)
   width: 100%;
 }
 </style>
-```
+
 
 
 
diff --git a/components/form/demo/register.md b/components/form/demo/register.vue
similarity index 99%
rename from components/form/demo/register.md
rename to components/form/demo/register.vue
index f43019d39..4675096f5 100644
--- a/components/form/demo/register.md
+++ b/components/form/demo/register.vue
@@ -8,7 +8,7 @@
 Fill in this form to create a new account for you.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -254,7 +254,7 @@ const RegistrationForm = {
 
 export default Form.create()(RegistrationForm)
 </script>
-```
+
 
 
 
diff --git a/components/form/demo/test.vue b/components/form/demo/test.vue
deleted file mode 100644
index 3dc8fdc54..000000000
--- a/components/form/demo/test.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<script>
-import { Form } from 'vue-antd-ui'
-
-const Demo = {
-  methods: {
-    handleSubmit  (e) {
-      e.preventDefault()
-      this.form.validateFields((err, values) => {
-        if (!err) {
-          console.log('Received values of form: ', values)
-        }
-      })
-    },
-    normFile  (e) {
-      console.log('Upload event:', e)
-      if (Array.isArray(e)) {
-        return e
-      }
-      return e && e.fileList
-    },
-  },
-
-  render () {
-    const { getFieldDecorator } = this.form
-    const formItemLayout = {
-      labelCol: { span: 6 },
-      wrapperCol: { span: 14 },
-    }
-    return (
-      <a-form onSubmit={this.handleSubmit}>
-        <a-form-item
-          {...{ props: formItemLayout }}
-          label='Plain Text'
-        >
-          <span class='ant-form-text'>China</span>
-        </a-form-item>
-        <a-form-item
-          {...{ props: formItemLayout }}
-          label='Select'
-          hasFeedback
-        >
-          {getFieldDecorator('select', {
-            rules: [
-              { required: true, message: 'Please select your country!' },
-            ],
-          })(
-            <a-select placeholder='Please select a country'>
-              <a-select-option value='china'>China</a-select-option>
-              <a-select-option value='use'>U.S.A</a-select-option>
-            </a-select>
-          )}
-        </a-form-item>
-
-        <a-form-item
-          {...{ props: formItemLayout }}
-          label='Select[multiple]'
-        >
-          {getFieldDecorator('select-multiple', {
-            rules: [
-              { required: true, message: 'Please select your favourite colors!', type: 'array' },
-            ],
-          })(
-            <a-select mode='multiple' placeholder='Please select favourite colors'>
-              <a-select-option value='red'>Red</a-select-option>
-              <a-select-option value='green'>Green</a-select-option>
-              <a-select-option value='blue'>Blue</a-select-option>
-            </a-select>
-          )}
-        </a-form-item>
-
-        <a-form-item
-          {...{ props: formItemLayout }}
-          label='InputNumber'
-        >
-          {getFieldDecorator('input-number', { initialValue: 3 })(
-            <a-input-number min={1} max={10} />
-          )}
-          <span class='ant-form-text'> machines</span>
-        </a-form-item>
-
-        <a-form-item
-          {...{ props: formItemLayout }}
-          label='Switch'
-        >
-          {getFieldDecorator('switch', { valuePropName: 'checked' })(
-            <a-switch />
-          )}
-        </a-form-item>
-
-        <a-form-item
-          {...{ props: formItemLayout }}
-          label='Slider'
-        >
-          {getFieldDecorator('slider')(
-            <a-slider marks={{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }} />
-          )}
-        </a-form-item>
-
-        <a-form-item
-          {...{ props: formItemLayout }}
-          label='Radio.Group'
-        >
-          {getFieldDecorator('radio-group')(
-            <a-radio-group>
-              <a-radio value='a'>item 1</a-radio>
-              <a-radio value='b'>item 2</a-radio>
-              <a-radio value='c'>item 3</a-radio>
-            </a-radio-group>
-          )}
-        </a-form-item>
-
-        <a-form-item
-          {...{ props: formItemLayout }}
-          label='Radio.Button'
-        >
-          {getFieldDecorator('radio-button')(
-            <a-radio-group>
-              <a-radio-button value='a'>item 1</a-radio-button>
-              <a-radio-button value='b'>item 2</a-radio-button>
-              <a-radio-button value='c'>item 3</a-radio-button>
-            </a-radio-group>
-          )}
-        </a-form-item>
-
-        <a-form-item
-          {...{ props: formItemLayout }}
-          label='Rate'
-        >
-          {getFieldDecorator('rate', {
-            initialValue: 3.5,
-          })(
-            <a-rate allowHalf/>
-          )}
-        </a-form-item>
-
-        <a-form-item
-          {...{ props: formItemLayout }}
-          label='Upload'
-          extra='longgggggggggggggggggggggggggggggggggg'
-        >
-          {getFieldDecorator('upload', {
-            valuePropName: 'fileList',
-            getValueFromEvent: this.normFile,
-          })(
-            <a-upload name='logo' action='/upload.do' listType='picture'>
-              <a-button>
-                <a-icon type='upload' /> Click to upload
-              </a-button>
-            </a-upload>
-          )}
-        </a-form-item>
-
-        <a-form-item
-          {...{ props: formItemLayout }}
-          label='Dragger'
-        >
-          <div class='dropbox'>
-            {getFieldDecorator('dragger', {
-              valuePropName: 'fileList',
-              getValueFromEvent: this.normFile,
-            })(
-              <a-upload-dragger name='files' action='/upload.do'>
-                <p class='ant-upload-drag-icon'>
-                  <a-icon type='inbox' />
-                </p>
-                <p class='ant-upload-text'>Click or drag file to this area to upload</p>
-                <p class='ant-upload-hint'>Support for a single or bulk upload.</p>
-              </a-upload-dragger>
-            )}
-          </div>
-        </a-form-item>
-
-        <a-form-item
-          wrapperCol={{ span: 12, offset: 6 }}
-        >
-          <a-button type='primary' htmlType='submit'>Submit</a-button>
-        </a-form-item>
-      </a-form>
-    )
-  },
-}
-
-export default Form.create()(Demo)
-</script>
-
diff --git a/components/form/demo/time-related-controls.md b/components/form/demo/time-related-controls.vue
similarity index 99%
rename from components/form/demo/time-related-controls.md
rename to components/form/demo/time-related-controls.vue
index 712d2c1b8..35d7f612a 100644
--- a/components/form/demo/time-related-controls.md
+++ b/components/form/demo/time-related-controls.vue
@@ -8,7 +8,7 @@
 the `value` of time-related components is `moment`. So, we need to pre-process those values.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -125,7 +125,7 @@ const TimeRelatedForm = {
 
 export default Form.create()(TimeRelatedForm)
 </script>
-```
+
 
 
 
diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.vue
similarity index 98%
rename from components/form/demo/validate-other.md
rename to components/form/demo/validate-other.vue
index 1a71ea1dc..3b2babd97 100644
--- a/components/form/demo/validate-other.md
+++ b/components/form/demo/validate-other.vue
@@ -8,7 +8,7 @@
 Demostration for validataion configuration for form controls which are not show in the above demos.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -38,7 +38,7 @@ const Demo = {
       wrapperCol: { span: 14 },
     }
     return (
-      <a-form id="components-form-demo-validate-other" onSubmit={this.handleSubmit}>
+      <a-form id='components-form-demo-validate-other' onSubmit={this.handleSubmit}>
         <a-form-item
           {...{ props: formItemLayout }}
           label='Plain Text'
@@ -199,7 +199,7 @@ export default Form.create()(Demo)
   line-height: 1.5;
 }
 </style>
-```
+
 
 
 
diff --git a/components/form/demo/validate-static.md b/components/form/demo/validate-static.vue
similarity index 99%
rename from components/form/demo/validate-static.md
rename to components/form/demo/validate-static.vue
index 81435097b..1d5faf76a 100644
--- a/components/form/demo/validate-static.md
+++ b/components/form/demo/validate-static.vue
@@ -14,7 +14,7 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo
 3. `help`: display validate message.
 </us>
 
-```html
+
 <template>
   <a-form>
     <a-form-item
@@ -172,7 +172,7 @@ export default {
   },
 }
 </script>
-```
+
 
 
 
diff --git a/components/form/demo/without-form-create.md b/components/form/demo/without-form-create.vue
similarity index 99%
rename from components/form/demo/without-form-create.md
rename to components/form/demo/without-form-create.vue
index 496719e18..226e177ff 100644
--- a/components/form/demo/without-form-create.md
+++ b/components/form/demo/without-form-create.vue
@@ -8,7 +8,7 @@
 `Form.create` will collect and validate form data automatically. But if you don't need this feature or the default behaviour cannot satisfy your business, you can drop `Form.create` and handle form data manually.
 </us>
 
-```html
+
 <template>
   <a-form>
     <a-form-item
@@ -61,7 +61,7 @@ export default {
   },
 }
 </script>
-```
+
 
 
 
diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md
index a203b1d27..90d3cc487 100644
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@@ -1,29 +1,31 @@
 
-```jsx
+````html
 <Form.Item {...props}>
   {children}
 </Form.Item>
-```
+````
 
 ## API
 
 ### Form
 
-**more example [rc-form](http://react-component.github.io/form/)**。
-
 | Property | Description | Type | Default Value |
 | -------- | ----------- | ---- | ------------- |
-| form | Decorated by `Form.create()` will be automatically set `this.props.form` property, so just pass to form, you don't need to set it by yourself after 1.7.0. | object | n/a |
+| form | Decorated by `Form.create()` will be automatically set `this.form` property, so just pass to form, you don't need to set it by yourself after 1.7.0. | object | n/a |
 | hideRequiredMark | Hide required mark of all form items | Boolean | false |
 | layout | Define form layout(Support after 2.8) | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
-| onSubmit | Defines a function will be called if form data validation is successful. | Function(e:Event) |  |
+
+### Events
+| Events Name | Description | Arguments |
+| --- | --- | --- |
+| submit | Defines a function will be called if form data validation is successful. | Function(e:Event) |
 
 ### Form.create(options)
 
 How to use：
 
 ```jsx
-class CustomizedForm extends React.Component {}
+const CustomizedForm = {}
 
 CustomizedForm = Form.create({})(CustomizedForm);
 ```
@@ -32,12 +34,13 @@ The following `options` are available:
 
 | Property | Description | Type |
 | -------- | ----------- | ---- |
+| props | declare props on form(和[like vue props]( https://vuejs.org/v2/api/#props)) | {} |
 | mapPropsToFields | Convert props to field value(e.g. reading the values from Redux store). And you must mark returned fields with [`Form.createFormField`](#Form.createFormField) | (props) => Object{ fieldName: FormField { value } } |
 | validateMessages | Default validate message. And its format is similar with [newMessages](https://github.com/yiminghe/async-validator/blob/master/src/messages.js)'s returned value | Object { [nested.path]&#x3A; String } |
 | onFieldsChange | Specify a function that will be called when the value a `Form.Item` gets changed. Usage example: saving the field's value to Redux store. | Function(props, fields) |
 | onValuesChange | A handler while value of any field is changed | (props, values) => void |
 
-If the form has been decorated by `Form.create` then it has `this.props.form` property. `this.props.form` provides some APIs as follows:
+If the form has been decorated by `Form.create` then it has `this.form` property. `this.form` provides some APIs as follows:
 
 > Note: Before using `getFieldsValue` `getFieldValue` `setFieldsValue` and so on, please make sure that corresponding field had been registered with `getFieldDecorator`.
 
@@ -52,13 +55,13 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr
 | isFieldTouched | Check whether a field is touched by `getFieldDecorator`'s `options.trigger` event | (name: string) => boolean |
 | isFieldValidating | Check if the specified field is being validated. | Function(name) |
 | resetFields | Reset the specified fields' value(to `initialValue`) and status. If you don't specify a parameter, all the fields will be reset. | Function(\[names: string\[]]) |
-| setFields | Set the value and error of a field. [Code Sample](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | Function({ [fieldName]&#x3A; { value: any, errors: [Error] } }) |
+| setFields | Set the value and error of a field. | Function({ [fieldName]&#x3A; { value: any, errors: [Error] } }) |
 | setFields |  | Function(obj: object) |
-| setFieldsValue | Set the value of a field.(Note: please don't use it in `componentWillReceiveProps`, otherwise, it will cause an endless loop, [more](https://github.com/ant-design/ant-design/issues/2985)) | Function({ [fieldName]&#x3A; value } |
+| setFieldsValue | Set the value of a field. | Function({ [fieldName]&#x3A; value } |
 | validateFields | Validate the specified fields and get theirs values and errors. If you don't specify the parameter of fieldNames, you will vaildate all fields. | Function(\[fieldNames: string\[]], [options: object], callback: Function(errors, values)) |
 | validateFieldsAndScroll | This function is similar to `validateFields`, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area. | same as `validateFields` |
 
-### this.props.form.validateFields/validateFieldsAndScroll(\[fieldNames: string\[]], [options: object], callback: Function(errors, values))
+### this.form.validateFields/validateFieldsAndScroll(\[fieldNames: string\[]], [options: object], callback: Function(errors, values))
 
 | Method | Description | Type | Default |
 | ------ | ----------- | ---- | ------- |
@@ -71,18 +74,18 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr
 
 To mark the returned fields data in `mapPropsToFields`, [demo](#components-form-demo-global-state).
 
-### this.props.form.getFieldDecorator(id, options)
+### this.form.getFieldDecorator(id, options)
 
 After wrapped by `getFieldDecorator`, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls，the flow of form data will be handled by Form which will cause:
 
 1. You shouldn't use `onChange` to collect data, but you still can listen to `onChange`(and so on) events.
 2. You can not set value of form control via `value` `defaultValue` prop, and you should set default value with `initialValue` in `getFieldDecorator` instead.
-3. You shouldn't call `setState` manually, please use `this.props.form.setFieldsValue` to change value programmatically.
+3. You shouldn't call `v-model` manually, please use `this.form.setFieldsValue` to change value programmatically.
 
 #### Special attention
 
 1. `getFieldDecorator` can not be used to decorate stateless component.
-2. If you use `react@<15.3.0`, then, you can't use `getFieldDecorator` in stateless component: <https://github.com/facebook/react/pull/6534>
+2. you can't use `getFieldDecorator` in stateless component: <https://vuejs.org/v2/api/#functional>
 
 #### getFieldDecorator(id, options) parameters
 
@@ -98,14 +101,13 @@ After wrapped by `getFieldDecorator`, `value`(or other property defined by `valu
 | options.validateTrigger | When to validate the value of children node. | string\|string\[] | 'onChange' |
 | options.valuePropName | Props of children node, for example, the prop of Switch is 'checked'. | string | 'value' |
 
-More option at [rc-form option](https://github.com/react-component/form#option-object)。
+More option can be referenced at [rc-form option](https://github.com/react-component/form#option-object)。
 
 ### Form.Item
 
 Note:
 
 - If Form.Item has multiple children that had been decorated by `getFieldDecorator`, `help` and `required` and `validateStatus` can't be generated automatically.
-- Before `2.2.0`, form controls must be child of Form.Item, otherwise, you need to set `help`, `required` and `validateStatus` by yourself.
 
 | Property | Description | Type | Default Value |
 | -------- | ----------- | ---- | ------------- |
@@ -114,10 +116,10 @@ Note:
 | hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false |
 | help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode |  |
 | label | Label text | string\|ReactNode |  |
-| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](https://ant.design/components/grid/#Col) |  |
+| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/ant-design/components/grid/#Col) |  |
 | required | Whether provided or not, it will be generated by the validation rule. | boolean | false |
 | validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string |  |
-| wrapperCol | The layout for input controls, same as `labelCol` | [object](https://ant.design/components/grid/#Col) |  |
+| wrapperCol | The layout for input controls, same as `labelCol` | [object](/ant-design/components/grid/#Col) |  |
 
 ### Validation Rules
 
@@ -137,24 +139,3 @@ Note:
 
 See more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).
 
-<style>
-.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
-  max-width: 600px;
-}
-</style>
-
-## Using in TypeScript
-
-```jsx
-import { Form } from 'antd';
-import { FormComponentProps } from 'antd/lib/form';
-
-interface UserFormProps extends FormComponentProps {
-  age: number;
-  name: string;
-}
-
-class UserForm extends React.Component<UserFormProps, any> {
-
-}
-```
diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md
index 2a104b59f..096bafdd8 100644
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@@ -1,29 +1,31 @@
 
-```jsx
+````html
 <Form.Item {...props}>
   {children}
 </Form.Item>
-```
+````
 
 ## API
 
 ### Form
 
-**更多示例参考 [rc-form](http://react-component.github.io/form/)**。
-
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | form | 经 `Form.create()` 包装过的组件会自带 `this.form` 属性，直接传给 Form 即可。无需手动设置 | object | 无 |
 | hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false |
-| layout | 表单布局(2.8 之后支持) | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
-| onSubmit | 数据验证成功后回调事件 | Function(e:Event) |  |
+| layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
+
+### 事件
+| 事件名称 | 说明 | 回调参数 |
+| --- | --- | --- |
+| submit | 数据验证成功后回调事件 | Function(e:Event) |
 
 ### Form.create(options)
 
 使用方式如下：
 
 ```jsx
-class CustomizedForm extends React.Component {}
+const CustomizedForm = {}
 
 CustomizedForm = Form.create({})(CustomizedForm);
 ```
@@ -32,12 +34,13 @@ CustomizedForm = Form.create({})(CustomizedForm);
 
 | 参数 | 说明 | 类型 |
 | --- | --- | --- |
+| props | 父组件需要映射到表单项上的属性声明(和[vue组件props一致]( https://vuejs.org/v2/api/#props)) | {} |
 | mapPropsToFields | 把父组件的属性映射到表单项上（如：把 Redux store 中的值读出），需要对返回值中的表单域数据用 [`Form.createFormField`](#Form.createFormField) 标记 | (props) => Object{ fieldName: FormField { value } } |
 | validateMessages | 默认校验信息，可用于把默认错误信息改为中文等，格式与 [newMessages](https://github.com/yiminghe/async-validator/blob/master/src/messages.js) 返回值一致 | Object { [nested.path]&#x3A; String } |
 | onFieldsChange | 当 `Form.Item` 子节点的值发生改变时触发，可以把对应的值转存到 Redux store | Function(props, fields) |
 | onValuesChange | 任一表单域的值发生改变时的回调 | (props, values) => void |
 
-经过 `Form.create` 包装的组件将会自带 `this.props.form` 属性，`this.props.form` 提供的 API 如下：
+经过 `Form.create` 包装的组件将会自带 `this.form` 属性，`this.form` 提供的 API 如下：
 
 > 注意：使用 `getFieldsValue` `getFieldValue` `setFieldsValue` 等时，应确保对应的 field 已经用 `getFieldDecorator` 注册过了。
 
@@ -52,12 +55,12 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | isFieldTouched | 判断一个输入控件是否经历过 `getFieldDecorator` 的值收集时机 `options.trigger` | (name: string) => boolean |
 | isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) |
 | resetFields | 重置一组输入控件的值（为 `initialValue`）与状态，如不传入参数，则重置所有组件 | Function(\[names: string\[]]) |
-| setFields | 设置一组输入控件的值与 Error。 [代码](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | Function({ [fieldName]&#x3A; { value: any, errors: [Error] } }) |
-| setFieldsValue | 设置一组输入控件的值（注意：不要在 `componentWillReceiveProps` 内使用，否则会导致死循环，[更多](https://github.com/ant-design/ant-design/issues/2985)） | Function({ [fieldName]&#x3A; value } |
+| setFields | 设置一组输入控件的值与 Error。 | Function({ [fieldName]&#x3A; { value: any, errors: [Error] } }) |
+| setFieldsValue | 设置一组输入控件的值 | Function({ [fieldName]&#x3A; value } |
 | validateFields | 校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件 | Function(\[fieldNames: string\[]], [options: object], callback: Function(errors, values)) |
 | validateFieldsAndScroll | 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 | 参考 `validateFields` |
 
-### this.props.form.validateFields/validateFieldsAndScroll(\[fieldNames: string\[]], [options: object], callback: Function(errors, values))
+### this.form.validateFields/validateFieldsAndScroll(\[fieldNames: string\[]], [options: object], callback: Function(errors, values))
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -70,24 +73,24 @@ CustomizedForm = Form.create({})(CustomizedForm);
 
 用于标记 `mapPropsToFields` 返回的表单域数据，[例子](#components-form-demo-global-state)。
 
-### this.props.form.getFieldDecorator(id, options)
+### this.form.getFieldDecorator(id, options)
 
 经过 `getFieldDecorator` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
 
 1. 你**不再需要也不应该**用 `onChange` 来做同步，但还是可以继续监听 `onChange` 等事件。
 2. 你不能用控件的 `value` `defaultValue` 等属性来设置表单域的值，默认值可以用 `getFieldDecorator` 里的 `initialValue`。
-3. 你不应该用 `setState`，可以使用 `this.props.form.setFieldsValue` 来动态改变表单值。
+3. 你不应该用 `v-modle`，可以使用 `this.form.setFieldsValue` 来动态改变表单值。
 
 #### 特别注意
 
 1. `getFieldDecorator` 不能用于装饰纯函数组件。
-2. 如果使用的是 `react@<15.3.0`，则 `getFieldDecorator` 调用不能位于纯函数组件中: <https://github.com/facebook/react/pull/6534>
+2. `getFieldDecorator` 调用不能位于纯函数组件中 <https://cn.vuejs.org/v2/api/#functional>。
 
 #### getFieldDecorator(id, options) 参数
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| id | 必填输入控件唯一标志。支持嵌套式的[写法](https://github.com/react-component/form/pull/48)。 | string |  |
+| id | 必填输入控件唯一标志。支持嵌套式的写法。 | string |  |
 | options.getValueFromEvent | 可以把 onChange 的参数（如 event）转化为控件的值 | function(..args) | [reference](https://github.com/react-component/form#option-object) |
 | options.initialValue | 子节点的初始值，类型、可选值均由子节点决定(注意：由于内部校验时使用 `===` 判断是否变化，建议使用变量缓存所需设置的值而非直接使用字面量)) |  |  |
 | options.normalize | 转换默认的 value 给控件，[一个选择全部的例子](https://codepen.io/afc163/pen/JJVXzG?editors=001) | function(value, prevValue, allValues): any | - |
@@ -97,14 +100,13 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | options.validateTrigger | 校验子节点值的时机 | string\|string\[] | 'onChange' |
 | options.valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | 'value' |
 
-更多参数请查看 [rc-form option](https://github.com/react-component/form#option-object)。
+更多参数可参考 [rc-form option](https://github.com/react-component/form#option-object)。
 
 ### Form.Item
 
 注意：
 
 - 一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child，当有多个被装饰过的 child 时，`help` `required` `validateStatus` 无法自动生成。
-- `2.2.0` 之前，只有当表单域为 Form.Item 的子元素时，才会自动生成 `help` `required` `validateStatus`，嵌套情况需要自行设置。
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -113,10 +115,10 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false |
 | help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|ReactNode |  |
 | label | label 标签的文本 | string\|ReactNode |  |
-| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](https://ant.design/components/grid/#Col) |  |
+| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/ant-design/components/grid-cn/#Col) |  |
 | required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false |
 | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string |  |
-| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](https://ant.design/components/grid/#Col) |  |
+| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/ant-design/components/grid-cn/#Col) |  |
 
 ### 校验规则
 
@@ -136,24 +138,4 @@ CustomizedForm = Form.create({})(CustomizedForm);
 
 更多高级用法可研究 [async-validator](https://github.com/yiminghe/async-validator)。
 
-<style>
-.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
-  max-width: 600px;
-}
-</style>
-
-## 在 TypeScript 中使用
 
-```jsx
-import { Form } from 'antd';
-import { FormComponentProps } from 'antd/lib/form';
-
-interface UserFormProps extends FormComponentProps {
-  age: number;
-  name: string;
-}
-
-class UserForm extends React.Component<UserFormProps, any> {
-
-}
-```
diff --git a/site/components/demoBox.vue b/site/components/demoBox.vue
index 9cfeee022..79f54f2d4 100644
--- a/site/components/demoBox.vue
+++ b/site/components/demoBox.vue
@@ -51,10 +51,10 @@ export default {
   },
   data () {
     const { name = '' } = this.$route.params
-    const { html, script, style, us, cn } = this.jsfiddle
-    let sourceCode = `<template>${html}</template>\n`
-    sourceCode = script ? sourceCode + '\<script>' + script + '<\/script>' : sourceCode
-    sourceCode = style ? sourceCode + '\<style>' + style + '<\/style>' : sourceCode
+    const { html, script, style, us, cn, sourceCode } = this.jsfiddle
+    // let sourceCode = `<template>${html}</template>\n`
+    // sourceCode = script ? sourceCode + '\<script>' + script + '<\/script>' : sourceCode
+    // sourceCode = style ? sourceCode + '\<style>' + style + '<\/style>' : sourceCode
     const usTitle = (us.split('#### ')[1] || '').split('\n')[0] || ''
     const cnTitle = (cn.split('#### ')[1] || '').split('\n')[0] || ''
     if (process.env.NODE_ENV !== 'production' && usTitle === '') {
diff --git a/site/components/demoContainer.vue b/site/components/demoContainer.vue
new file mode 100644
index 000000000..e0de23988
--- /dev/null
+++ b/site/components/demoContainer.vue
@@ -0,0 +1,81 @@
+<template>
+<div>
+  <demo-box :jsfiddle="jsfiddle">
+    <template slot="component"><slot /></template>
+    <template slot="description">
+      <div v-html="cnHtml"></div>
+    </template>
+    <template slot="us-description">
+      <div v-html="usHtml"></div>
+    </template>
+    <template slot="code">
+      <div v-html="codeHtml"></div>
+    </template>
+  </demo-box>
+</div>
+</template>
+
+<script>
+import marked from 'marked'
+const hljs = require('highlight.js')
+const replaceDelimiters = function (str) {
+  return str.replace(/({{|}})/g, '<span>$1</span>')
+}
+const renderHighlight = function (str, lang) {
+  if (!(lang && hljs.getLanguage(lang))) {
+    return ''
+  }
+
+  try {
+    return replaceDelimiters(hljs.highlight(lang, str, true).value)
+  } catch (err) {}
+}
+const renderer = new marked.Renderer()
+renderer.heading = function (text, level) {
+  return '<h' +
+    level +
+    ' id="' +
+    text.replace(/[^\w]+/g, '-') +
+    '">' +
+    text +
+    '</h' +
+    level +
+    '>\n'
+}
+marked.setOptions({
+  renderer,
+  gfm: true,
+  tables: true,
+  breaks: true,
+  pedantic: true,
+  sanitize: true,
+  smartLists: true,
+  smartypants: true,
+  html: true,
+  highlight: renderHighlight,
+})
+const cnReg = /<cn>([\S\s\t]*?)<\/cn>/
+const usReg = /<us>([\S\s\t]*?)<\/us>/
+export default {
+  name: 'demoContainer',
+  props: ['code'],
+  data () {
+    const cn = this.code.match(cnReg) || []
+    const us = this.code.match(usReg) || []
+    const cnHtml = marked(cn[1].trim())
+    const usHtml = marked(us[1].trim())
+    const sourceCode = this.code.replace(cn[0], '').replace(us[0], '').trim()
+    const codeHtml = marked('````jsx\n' + sourceCode + '````')
+    return {
+      codeHtml,
+      cnHtml,
+      usHtml,
+      jsfiddle: {
+        sourceCode,
+        cn: cn[1].trim(),
+        us: us[1].trim(),
+      },
+    }
+  },
+}
+</script>
diff --git a/site/components/md.vue b/site/components/md.vue
index 0e00e56f6..2e4c4d2f1 100644
--- a/site/components/md.vue
+++ b/site/components/md.vue
@@ -4,18 +4,18 @@
 <script>
 import marked from 'marked'
 import { isZhCN } from '../util'
-var renderer = new marked.Renderer();
-renderer.heading = function(text, level) {
-  return '<h'
-    + level
-    + ' id="'
-    + text.replace(/[^\w]+/g, '-')
-    + '">'
-    + text
-    + '</h'
-    + level
-    + '>\n';
-};
+const renderer = new marked.Renderer()
+renderer.heading = function (text, level) {
+  return '<h' +
+    level +
+    ' id="' +
+    text.replace(/[^\w]+/g, '-') +
+    '">' +
+    text +
+    '</h' +
+    level +
+    '>\n'
+}
 marked.setOptions({
   renderer,
   gfm: true,
diff --git a/site/demo.js b/site/demo.js
index 468098f23..b26f78e09 100644
--- a/site/demo.js
+++ b/site/demo.js
@@ -44,3 +44,4 @@ export { default as transfer } from 'antd/transfer/demo/index.vue'
 export { default as upload } from 'antd/upload/demo/index.vue'
 export { default as tree } from 'antd/tree/demo/index.vue'
 export { default as layout } from 'antd/layout/demo/index.vue'
+export { default as form } from 'antd/form/demo/index.vue'
diff --git a/site/index.js b/site/index.js
index 1aa3622aa..5f222f948 100644
--- a/site/index.js
+++ b/site/index.js
@@ -10,12 +10,14 @@ import Md from './components/md'
 import Api from './components/api'
 import './components'
 import demoBox from './components/demoBox'
+import demoContainer from './components/demoContainer'
 
 Vue.use(VueClipboard)
 Vue.use(VueRouter)
 Vue.component(Md.name, Md)
 Vue.component(Api.name, Api)
 Vue.component('demo-box', demoBox)
+Vue.component('demo-container', demoContainer)
 
 const router = new VueRouter({
   mode: 'history',
diff --git a/site/routes.js b/site/routes.js
index 51e8bec27..e419b199a 100644
--- a/site/routes.js
+++ b/site/routes.js
@@ -1,5 +1,5 @@
-// import Layout from './components/layout.vue'
-// import Iframe from './components/iframe.vue'
+import Layout from './components/layout.vue'
+import Iframe from './components/iframe.vue'
 
 const AsyncTestComp = () => {
   const d = window.location.hash.replace('#', '')
@@ -9,68 +9,68 @@ const AsyncTestComp = () => {
 }
 
 export default [
-  // { path: '/ant-design/components/:name/', component: Layout, props: true },
-  // { path: '/ant-design/iframe/:name/', component: Iframe, props: true },
-  // {
-  //   path: '/ant-design',
-  //   component: Layout,
-  //   props: (route) => {
-  //     const name = route.path.split('/docs/vue/')[1].split('/')[0]
-  //     return { name }
-  //   },
-  //   children: [
-  //     {
-  //       path: 'docs/vue/customize-theme',
-  //       component: () => import('../docs/vue/customize-theme.en-US.md'),
-  //     },
-  //     {
-  //       path: 'docs/vue/customize-theme-cn',
-  //       component: () => import('../docs/vue/customize-theme.zh-CN.md'),
-  //     },
-  //     {
-  //       path: 'docs/vue/getting-started',
-  //       component: () => import('../docs/vue/getting-started.en-US.md'),
-  //     },
-  //     {
-  //       path: 'docs/vue/getting-started-cn',
-  //       component: () => import('../docs/vue/getting-started.zh-CN.md'),
-  //     },
-  //     {
-  //       path: 'docs/vue/i18n',
-  //       component: () => import('../docs/vue/i18n.en-US.md'),
-  //     },
-  //     {
-  //       path: 'docs/vue/i18n-cn',
-  //       component: () => import('../docs/vue/i18n.zh-CN.md'),
-  //     },
-  //     {
-  //       path: 'docs/vue/introduce',
-  //       component: () => import('../docs/vue/introduce.en-US.md'),
-  //     },
-  //     {
-  //       path: 'docs/vue/introduce-cn',
-  //       component: () => import('../docs/vue/introduce.zh-CN.md'),
-  //     },
-  //     {
-  //       path: 'docs/vue/use-with-vue-cli',
-  //       component: () => import('../docs/vue/use-with-vue-cli.en-US.md'),
-  //     },
-  //     {
-  //       path: 'docs/vue/use-with-vue-cli-cn',
-  //       component: () => import('../docs/vue/use-with-vue-cli.zh-CN.md'),
-  //     },
-  //     {
-  //       path: 'docs/vue/changelog',
-  //       component: () => import('../CHANGELOG.en-US.md'),
-  //     },
-  //     {
-  //       path: 'docs/vue/changelog-cn',
-  //       component: () => import('../CHANGELOG.zh-CN.md'),
-  //     },
-  //     { path: '', redirect: '/ant-design/vue/docs/introduce/' },
-  //   ],
-  // },
+  { path: '/ant-design/components/:name/', component: Layout, props: true },
+  { path: '/ant-design/iframe/:name/', component: Iframe, props: true },
+  {
+    path: '/ant-design',
+    component: Layout,
+    props: (route) => {
+      const name = route.path.split('/docs/vue/')[1].split('/')[0]
+      return { name }
+    },
+    children: [
+      {
+        path: 'docs/vue/customize-theme',
+        component: () => import('../docs/vue/customize-theme.en-US.md'),
+      },
+      {
+        path: 'docs/vue/customize-theme-cn',
+        component: () => import('../docs/vue/customize-theme.zh-CN.md'),
+      },
+      {
+        path: 'docs/vue/getting-started',
+        component: () => import('../docs/vue/getting-started.en-US.md'),
+      },
+      {
+        path: 'docs/vue/getting-started-cn',
+        component: () => import('../docs/vue/getting-started.zh-CN.md'),
+      },
+      {
+        path: 'docs/vue/i18n',
+        component: () => import('../docs/vue/i18n.en-US.md'),
+      },
+      {
+        path: 'docs/vue/i18n-cn',
+        component: () => import('../docs/vue/i18n.zh-CN.md'),
+      },
+      {
+        path: 'docs/vue/introduce',
+        component: () => import('../docs/vue/introduce.en-US.md'),
+      },
+      {
+        path: 'docs/vue/introduce-cn',
+        component: () => import('../docs/vue/introduce.zh-CN.md'),
+      },
+      {
+        path: 'docs/vue/use-with-vue-cli',
+        component: () => import('../docs/vue/use-with-vue-cli.en-US.md'),
+      },
+      {
+        path: 'docs/vue/use-with-vue-cli-cn',
+        component: () => import('../docs/vue/use-with-vue-cli.zh-CN.md'),
+      },
+      {
+        path: 'docs/vue/changelog',
+        component: () => import('../CHANGELOG.en-US.md'),
+      },
+      {
+        path: 'docs/vue/changelog-cn',
+        component: () => import('../CHANGELOG.zh-CN.md'),
+      },
+      { path: '', redirect: '/ant-design/vue/docs/introduce/' },
+    ],
+  },
 
   { path: '/:prefix?/test/:demo?/', component: AsyncTestComp },
-  // { path: '/*', redirect: '/ant-design/docs/vue/introduce/' },
+  { path: '/*', redirect: '/ant-design/docs/vue/introduce/' },
 ]
diff --git a/webpack.base.config.js b/webpack.base.config.js
index 8256cafac..ecc602572 100644
--- a/webpack.base.config.js
+++ b/webpack.base.config.js
@@ -65,6 +65,7 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
   let style = ''
   let scopedStyle = ''
   let code = ''
+  let sourceCode = ''
   tokens.forEach(token => {
     if (token.type === 'html_block') {
       if (token.content.match(cnReg)) {
@@ -77,6 +78,7 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
       }
     }
     if (token.type === 'fence' && token.info === 'html' && token.markup === '```') {
+      sourceCode = token.content
       code = '````html\n' + token.content + '````'
       template = fetch(token.content, 'template')
       script = fetch(token.content, 'script')
@@ -93,6 +95,7 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
       style,
       us,
       cn,
+      sourceCode,
     }
     jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle))
     const codeHtml = code ? md.render(code) : ''