diff --git a/components/pagination/demo/basic.md b/components/pagination/demo/basic.md
new file mode 100644
index 000000000..2f8e1a8a6
--- /dev/null
+++ b/components/pagination/demo/basic.md
@@ -0,0 +1,26 @@
+
+<cn>
+#### 基本
+基础分页。
+</cn>
+
+<us>
+#### Basic
+Basic pagination.
+</us>
+
+```html
+<template>
+  <a-pagination v-model="current" :total="50" />
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        current: 2,
+      }
+    }
+  }
+</script>
+```
+
diff --git a/components/pagination/demo/changer.md b/components/pagination/demo/changer.md
new file mode 100644
index 000000000..c9da54db6
--- /dev/null
+++ b/components/pagination/demo/changer.md
@@ -0,0 +1,31 @@
+
+<cn>
+#### 改变
+改变每页显示条目数。
+</cn>
+
+<us>
+#### Changer
+Change `pageSize`.
+</us>
+
+```html
+<template>
+  <a-pagination showSizeChanger @showSizeChange="onShowSizeChange" :defaultCurrent="3" :total="500" />
+</template>
+<script>
+  export default {
+    methods: {
+      onShowSizeChange(current, pageSize) {
+        console.log(current, pageSize);
+      }
+    }
+  }
+</script>
+<style scoped>
+  .ant-select {
+    margin-bottom: 0 !important;
+  }
+</style>
+```
+
diff --git a/components/pagination/demo/controlled.md b/components/pagination/demo/controlled.md
new file mode 100644
index 000000000..f2ca753e1
--- /dev/null
+++ b/components/pagination/demo/controlled.md
@@ -0,0 +1,30 @@
+<cn>
+#### 受控
+受控制的页码。
+</cn>
+
+<us>
+#### Controlled
+Controlled page number.
+</us>
+
+```html
+<template>
+  <a-pagination  @change="onChange" :current="current" :total="50" />
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        current: 3
+      }
+    },
+    methods: {
+      onChange(current) {
+        this.current = current
+      }
+    }
+  }
+</script>
+```
+
diff --git a/components/pagination/demo/custom-changer.md b/components/pagination/demo/custom-changer.md
new file mode 100644
index 000000000..8b99f9174
--- /dev/null
+++ b/components/pagination/demo/custom-changer.md
@@ -0,0 +1,51 @@
+
+<cn>
+#### 自定义下拉选项
+自定义下拉选项，例如添加全部选项
+</cn>
+
+<us>
+#### Custom dropdown options
+Customize dropdown options such as adding all options
+</us>
+
+```html
+<template>
+  <a-pagination
+    :pageSizeOptions="pageSizeOptions"
+    :total="total"
+    showSizeChanger
+    :pageSize="pageSize"
+    v-model="current"
+    @showSizeChange="onShowSizeChange"
+  >
+      <template slot='buildOptionText' slot-scope='props'>
+        <span v-if="props.value!=='50'">{{props.value}}条/页</span>
+        <span v-if="props.value==='50'">全部</span>
+      </template>
+    </a-pagination>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        pageSizeOptions: ['10', '20', '30', '40', '50'],
+        current: 1,
+        pageSize: 10,
+        total: 50,
+      }
+    },
+    methods: {
+      onShowSizeChange(current, pageSize) {
+        this.pageSize = pageSize
+      },
+    }
+  }
+</script>
+<style scoped>
+  .ant-select {
+    margin-bottom: 0 !important;
+  }
+</style>
+```
+
diff --git a/components/pagination/demo/index.vue b/components/pagination/demo/index.vue
index 7a6bda42c..b7eedff07 100644
--- a/components/pagination/demo/index.vue
+++ b/components/pagination/demo/index.vue
@@ -1,88 +1,71 @@
-<template>
-  <div>
-    基本
-    <Pagination :current="1" :total="50" />
-    <br>
-    更多
-    <Pagination :current="6" :total="500" />
-    <br>
-    简洁
-    <div style="margin-bottom:10px">
-      <pagination :simple="simple" :current="5" :total="total"></pagination>
-    </div>
-    <br>
-    改值操作
-    <div style="margin-bottom:10px">
-      <pagination :current="current" :total="total" @change="onchange"></pagination>
-      <vc-button @click="changeValue">改值</vc-button>
-    </div>
-    <br>
-    双向绑定
-    <div>
-      <pagination v-model="current" :total="total" :showTotal="showTotal"></pagination>
-      <vc-button @click="getValue">当前值</vc-button>
-    </div>
-    <br>
-    迷你
-    <Pagination :current="1" :total="50" size="small"/>
-    <Pagination :current="1" :total="50" :showTotal="showTotal" size="small" showSizeChanger showQuickJumper/>
-    <br>
-    总数
-    <Pagination :current="1" :total="50" :showTotal="showTotal"/>
-    <Pagination :current="1" :total="50" :showTotal="showTotal1"/>
-    <br>
-    跳转
-    <Pagination v-model="current" :total="50" :showQuickJumper="showQuickJumper" showSizeChanger>
-      <template slot='buildOptionText' slot-scope='props'>
-        <span>{{props.value}}条/页</span>
-      </template>
-    </Pagination>
-    <vc-button @click="getValue">当前值</vc-button>
-    <br>
-    上一步下一步
-    <Pagination :total="500" :itemRender="itemRender" />
-  </div>
-</template>
 <script>
-import '../style'
-import { Pagination, Button } from 'antd/index'
+import Basic from './basic'
+import Changer from './changer'
+import Controlled from './controlled'
+import CustomChanger from './custom-changer'
+import ItemRender from './itemRender'
+import Jump from './jump'
+import Mini from './mini'
+import More from './more'
+import Simple from './simple'
+import Total from './total'
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+
+const md = {
+  cn: `# Pagination
+
+    采用分页的形式分隔长列表，每次只加载一个页面。
+
+    ## 何时使用
+
+    - 当加载/渲染所有数据将花费很多时间时；
+    - 可切换页码浏览数据。
+
+    ## 代码演示`,
+
+  us: `# Pagination
+
+    A long list can be divided into several pages by 'Pagination', and only one page will be loaded at a time.
+
+    ## When To Use
+
+    - When it will take a long time to load/render all items.
+    - If you want to browse the data by navigating through pages.`,
+}
 export default {
-  data () {
-    return {
-      simple: true,
-      current: 1,
-      total: 483,
-      showQuickJumper: true,
-    }
-  },
-  methods: {
-    changeValue () {
-      this.current = 4
-    },
-    getValue () {
-      console.log(this.current)
-    },
-    showTotal (total) {
-      return `Total ${total} items`
-    },
-    showTotal1 (total, range) {
-      return `${range[0]}-${range[1]} of ${total} items`
-    },
-    onchange (page) {
-      console.log(page)
-    },
-    itemRender (current, type, originalElement) {
-      if (type === 'prev') {
-        return <a>Previous</a>
-      } else if (type === 'next') {
-        return <a>Next</a>
-      }
-      return originalElement
-    },
-  },
-  components: {
-    Pagination,
-    vcButton: Button,
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <Basic />
+        <br/>
+        <More />
+        <br/>
+        <Changer />
+        <br/>
+        <CustomChanger />
+        <br/>
+        <Jump />
+        <br/>
+        <Mini />
+        <br/>
+        <Simple />
+        <br/>
+        <Controlled />
+        <br/>
+        <Total />
+        <br/>
+        <ItemRender />
+        <br/>
+        <api>
+          <template slot='cn'>
+            <CN/>
+          </template>
+          <US/>
+        </api>
+      </div>
+    )
   },
 }
 </script>
diff --git a/components/pagination/demo/itemRender.md b/components/pagination/demo/itemRender.md
new file mode 100644
index 000000000..3f11314fe
--- /dev/null
+++ b/components/pagination/demo/itemRender.md
@@ -0,0 +1,29 @@
+<cn>
+#### 上一步和下一步
+修改上一步和下一步为文字链接。
+</cn>
+
+<us>
+#### Prev and next
+Use text link for prev and next button.
+</us>
+
+```html
+<template>
+  <a-pagination :total="500" :itemRender="itemRender" />
+</template>
+<script>
+  export default {
+    methods: {
+      itemRender(current, type, originalElement) {
+        if (type === 'prev') {
+          return <a>Previous</a>;
+        } else if (type === 'next') {
+          return <a>Next</a>;
+        }
+        return originalElement;
+      }
+    }
+  }
+</script>
+```
diff --git a/components/pagination/demo/jump.md b/components/pagination/demo/jump.md
new file mode 100644
index 000000000..506f165e6
--- /dev/null
+++ b/components/pagination/demo/jump.md
@@ -0,0 +1,24 @@
+<cn>
+#### 跳转
+快速跳转到某一页。
+</cn>
+
+<us>
+#### Jumper
+Jump to a page directly.
+</us>
+
+```html
+<template>
+  <a-pagination showQuickJumper :defaultCurrent="2" :total="500" @change="onChange" />
+</template>
+<script>
+  export default {
+    methods: {
+      onChange(pageNumber) {
+        console.log('Page: ', pageNumber);
+      }
+    }
+  }
+</script>
+```
diff --git a/components/pagination/demo/mini.md b/components/pagination/demo/mini.md
new file mode 100644
index 000000000..f78c979a1
--- /dev/null
+++ b/components/pagination/demo/mini.md
@@ -0,0 +1,29 @@
+
+<cn>
+#### 迷你
+迷你版本。
+</cn>
+
+<us>
+#### Mini size
+Mini size pagination.
+</us>
+
+```html
+<template>
+  <div>
+    <a-pagination size="small" :total="50" />
+    <a-pagination size="small" :total="50" showSizeChanger showQuickJumper />
+    <a-pagination size="small" :total="50" :showTotal="total => `Total ${total} items`" />
+  </div>
+</template>
+<style scoped>
+.ant-select {
+  margin-bottom: 0 !important;
+}
+.code-box-demo .ant-pagination:not(:last-child) {
+  margin-bottom: 24px;
+}
+</style>
+```
+
diff --git a/components/pagination/demo/more.md b/components/pagination/demo/more.md
new file mode 100644
index 000000000..7ccae6d18
--- /dev/null
+++ b/components/pagination/demo/more.md
@@ -0,0 +1,17 @@
+
+<cn>
+#### 更多
+更多分页。
+</cn>
+
+<us>
+#### more
+Mode pages.
+</us>
+
+```html
+<template>
+  <a-pagination :defaultCurrent="6" :total="500" />
+</template>
+```
+
diff --git a/components/pagination/demo/simple.md b/components/pagination/demo/simple.md
new file mode 100644
index 000000000..5417f0df1
--- /dev/null
+++ b/components/pagination/demo/simple.md
@@ -0,0 +1,17 @@
+
+<cn>
+#### 简洁
+简单的翻页。
+</cn>
+
+<us>
+#### Simple mode
+Simple mode.
+</us>
+
+```html
+<template>
+  <a-pagination simple :defaultCurrent="2" :total="50" />
+</template>
+```
+
diff --git a/components/pagination/demo/total.md b/components/pagination/demo/total.md
new file mode 100644
index 000000000..98f4a49d9
--- /dev/null
+++ b/components/pagination/demo/total.md
@@ -0,0 +1,31 @@
+
+<cn>
+#### 总数
+通过设置 `showTotal` 展示总共有多少数据。
+</cn>
+
+<us>
+#### Total number
+You can show the total number of data by setting `showTotal`.
+</us>
+
+```html
+<template>
+  <div>
+    <a-pagination
+      :total="85"
+      :showTotal="total => `Total ${total} items`"
+      :pageSize="20"
+      :defaultCurrent="1"
+    />
+    <br />
+    <a-pagination
+      :total="85"
+      :showTotal="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
+      :pageSize="20"
+      :defaultCurrent="1"
+    />
+  </div>
+</template>
+```
+
diff --git a/components/pagination/index.en-US.md b/components/pagination/index.en-US.md
new file mode 100644
index 000000000..afc0b7ac3
--- /dev/null
+++ b/components/pagination/index.en-US.md
@@ -0,0 +1,27 @@
+## API
+
+```html
+<Pagination @change={onChange} :total="50" />
+```
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| current | current page number | number | - |
+| defaultCurrent | default initial page number | number | 1 |
+| defaultPageSize | default number of data items per page | number | 10 |
+| hideOnSinglePage | Whether to hide pager on single page | boolean | false |
+| itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |
+| pageSize | number of data items per page | number | - |
+| pageSizeOptions | specify the sizeChanger options | string\[] | ['10', '20', '30', '40'] |
+| showQuickJumper | determine whether you can jump to pages directly | boolean | false |
+| showSizeChanger | determine whether `pageSize` can be changed | boolean | false |
+| showTotal | to display the total number and range | Function(total, range) | - |
+| simple | whether to use simple mode | boolean | - |
+| size | specify the size of `Pagination`, can be set to `small` | string | "" |
+| total | total number of data items | number | 0 |
+
+### events
+| Events Name | Description | Arguments |
+| --- | --- | --- |
+| change | a callback function, executed when the page number is changed, and it takes the resulting page number and pageSize as its arguments | Function(page, pageSize) | noop |
+| showSizeChange | a callback function, executed when `pageSize` is changed | Function(current, size) | noop |
diff --git a/components/pagination/index.zh-CN.md b/components/pagination/index.zh-CN.md
new file mode 100644
index 000000000..b41592912
--- /dev/null
+++ b/components/pagination/index.zh-CN.md
@@ -0,0 +1,27 @@
+## API
+
+```html
+<Pagination @change={onChange} :total="50" />
+```
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| current(v-model) | 当前页数 | number | - |
+| defaultCurrent | 默认的当前页数 | number | 1 |
+| defaultPageSize | 默认的每页条数 | number | 10 |
+| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false |
+| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |
+| pageSize | 每页条数 | number | - |
+| pageSizeOptions | 指定每页可以显示多少条 | string\[] | ['10', '20', '30', '40'] |
+| showQuickJumper | 是否可以快速跳转至某页 | boolean | false |
+| showSizeChanger | 是否可以改变 pageSize | boolean | false |
+| showTotal | 用于显示数据总量和当前数据顺序 | Function(total, range) | - |
+| simple | 当添加该属性时，显示为简单分页 | boolean | - |
+| size | 当为「small」时，是小尺寸分页 | string | "" |
+| total | 数据总数 | number | 0 |
+
+### 事件
+| 事件名称 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 页码改变的回调，参数是改变后的页码及每页条数 | Function(page, pageSize) | noop |
+| showSizeChange | pageSize 变化的回调 | Function(current, size) | noop |
diff --git a/components/steps/demo/customized-progress-dot.md b/components/steps/demo/customized-progress-dot.md
index 590b2a8ff..57466d2a1 100644
--- a/components/steps/demo/customized-progress-dot.md
+++ b/components/steps/demo/customized-progress-dot.md
@@ -10,7 +10,7 @@ You can customize the display for Steps with progress dot style.
 
 ```html
 <template>
-  <a-steps :current="1" :progressDot="customDot" style="margin-top:150px">
+  <a-steps :current="1" :progressDot="customDot">
     <a-step title="Finished" description="You can hover on the dot." />
     <a-step title="In Progress" description="You can hover on the dot." />
     <a-step title="Waiting" description="You can hover on the dot." />
diff --git a/examples/routes.js b/examples/routes.js
index 928891f4b..c798a71bd 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const hashs = window.location.hash.split('/')
   const d = hashs[hashs.length - 1]
   return {
-    component: import(`../components/steps/demo/${d}`),
+    component: import(`../components/pagination/demo/${d}`),
   }
 }
 export default [