fixed(refractor-table): fixed merge conflicts with develop

2025-01-30 12:52:43 +08:00 · 2019-12-16 15:47:25 +08:00 · 2019-12-16 15:47:25 +08:00 · 1115a024f9
commit 1115a024f9
parent 6499178c7b bef6ee394d
650 changed files with 15751 additions and 7868 deletions
--- a/build/webpack.private-doc.js
+++ b/build/webpack.private-doc.js
@ -11,6 +11,7 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl

 const webpackConfig = {
  mode: 'production',
+  // mode: 'development',
  entry: './demo/privateIndex.js',
  output: {
    path: path.resolve(__dirname, '..', 'doc', 'dist'),
--- a/demo/debugComponents/iconTransitionDebug.vue
+++ b/demo/debugComponents/iconTransitionDebug.vue
@ -0,0 +1,64 @@
+<template>
+  <div
+    ref="doc"
+    class="n-doc"
+    style="padding: 150px;"
+  >
+    <n-button @click="show = !show">
+      show
+    </n-button>
+    <n-button @click="i = 0">
+      cash
+    </n-button>
+    <n-button @click="i = 1">
+      contacts
+    </n-button>
+    <n-button @click="i = 2">
+      contacts2
+    </n-button>
+    <div style="position: relative;">
+      <n-base-icon-transition v-if="show">
+        <n-icon
+          v-if="i === 0"
+          :size="60"
+          :themed-style="{
+            dark: {
+              fill: 'white'
+            },
+            light: {
+              fill: 'black'
+            }
+          }"
+        >
+          <md-cash />
+        </n-icon>
+        <n-icon v-else-if="i === 1" :size="60">
+          <md-contacts />
+        </n-icon>
+        <span v-else-if="i === 2" style="display: inline-block;">
+          123
+        </span>
+      </n-base-icon-transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import mdCash from 'naive-ui/lib/icons/md-cash'
+import mdContacts from 'naive-ui/lib/icons/md-contacts'
+import iosContacts from 'naive-ui/lib/icons/ios-contacts'
+
+export default {
+  components: {
+    mdCash,
+    mdContacts,
+    iosContacts
+  },
+  data () {
+    return {
+      i: 0,
+      show: false
+    }
+  }
+}
+</script>
--- a/demo/demo.vue
+++ b/demo/demo.vue
@ -1,12 +1,16 @@
 <template>
-  <n-app class="demo" namespace="naive-ui-doc" :theme="theme">
+  <n-config-provider class="demo" namespace="naive-ui-doc" :theme="theme">
    <n-nimbus-service-layout :padding-body="false" :items="items">
      <template v-slot:nav>
-        <doc-header :lang="lang" @lang-change="handleLangChange" />
+        <doc-header
+          :lang="lang"
+          :items="flattenedItems"
+          @lang-change="handleLangChange"
+        />
      </template>
      <router-view />
    </n-nimbus-service-layout>
-  </n-app>
+  </n-config-provider>
 </template>

 <script>
@ -42,8 +46,8 @@ export default {
          path: `/${this.lang}/${this.theme}` + '/dev-guildlines'
        },
        {
-          name: 'Develop Status',
-          path: `/${this.lang}/${this.theme}` + '/status'
+          name: 'Create Themed Component',
+          path: `/${this.lang}/${this.theme}` + '/n-theme'
        },
        {
          name: 'Nimbus Components',
@ -52,18 +56,36 @@ export default {
            {
              name: 'Nimbus Service Layout',
              path: `/${this.lang}/${this.theme}` + '/n-nimbus-service-layout'
+            }
+          ]
+        },
+        {
+          name: 'Config Components',
+          childItems: [
+            {
+              name: 'Config Provider',
+              path: `/${this.lang}/${this.theme}` + '/n-config-provider'
            },
            {
-              name: 'Nimbus Form Card',
-              path: `/${this.lang}/${this.theme}` + '/n-nimbus-form-card'
+              name: 'Config Consumer',
+              path: `/${this.lang}/${this.theme}` + '/n-config-consumer'
            },
            {
-              name: 'Nimbus Confirm Card',
-              path: `/${this.lang}/${this.theme}` + '/n-nimbus-confirm-card'
+              name: 'Element',
+              path: `/${this.lang}/${this.theme}` + '/n-element'
+            }
+          ]
+        },
+        {
+          name: 'Layout Components',
+          childItems: [
+            {
+              name: 'Layout',
+              path: `/${this.lang}/${this.theme}` + '/n-layout'
            },
            {
-              name: 'Nimbus Icon',
-              path: `/${this.lang}/${this.theme}` + '/n-nimbus-icon'
+              name: 'Grid',
+              path: `/${this.lang}/${this.theme}` + '/n-grid'
            }
          ]
        },
@ -71,49 +93,50 @@ export default {
          name: 'Common Components',
          childItems: [
            {
-              name: 'AdvanceTable',
-              path: `/${this.lang}/${this.theme}` + '/n-advance-table'
-            },
-            {
-              name: 'Affix',
-              path: `/${this.lang}/${this.theme}` + '/n-affix'
-            },
-            {
-              name: 'Alert',
-              path: `/${this.lang}/${this.theme}` + '/n-alert'
-            },
-            {
-              name: 'Anchor',
-              path: `/${this.lang}/${this.theme}` + '/n-anchor'
-            },
-            {
-              name: 'App',
-              path: `/${this.lang}/${this.theme}` + '/n-app'
-            },
-            {
-              name: 'AutoComplete',
-              path: `/${this.lang}/${this.theme}` + '/n-auto-complete'
-            },
-            {
-              name: 'Avator',
-              path: `/${this.lang}/${this.theme}` + '/n-avator'
-            },
-            {
-              name: 'BackTop',
-              path: `/${this.lang}/${this.theme}` + '/n-back-top'
-            },
-            {
-              name: 'Badge',
-              path: `/${this.lang}/${this.theme}` + '/n-badge'
-            },
-            {
-              name: 'Breadcrumb',
-              path: `/${this.lang}/${this.theme}` + '/n-breadcrumb'
+              name: 'Avatar',
+              path: `/${this.lang}/${this.theme}` + '/n-avatar'
            },
            {
              name: 'Button',
              path: `/${this.lang}/${this.theme}` + '/n-button'
            },
+            {
+              name: 'Card',
+              path: `/${this.lang}/${this.theme}` + '/n-card'
+            },
+            {
+              name: 'Collapse',
+              path: `/${this.lang}/${this.theme}` + '/n-collapse'
+            },
+            {
+              name: 'Divider',
+              path: `/${this.lang}/${this.theme}` + '/n-divider'
+            },
+            {
+              name: 'Dropdown',
+              path: `/${this.lang}/${this.theme}` + '/n-dropdown'
+            },
+            {
+              name: 'Gradient Text',
+              path: `/${this.lang}/${this.theme}` + '/n-gradient-text'
+            },
+            {
+              name: 'Icon',
+              path: `/${this.lang}/${this.theme}` + '/n-icon'
+            },
+            {
+              name: 'Tag',
+              path: `/${this.lang}/${this.theme}` + '/n-tag'
+            }
+          ]
+        },
+        {
+          name: 'Data Input Components',
+          childItems: [
+            {
+              name: 'Auto Complete',
+              path: `/${this.lang}/${this.theme}` + '/n-auto-complete'
+            },
            {
              name: 'Cascader',
              path: `/${this.lang}/${this.theme}` + '/n-cascader'
@ -123,85 +146,160 @@ export default {
              path: `/${this.lang}/${this.theme}` + '/n-checkbox'
            },
            {
-              name: 'Collapse',
-              path: `/${this.lang}/${this.theme}` + '/n-collapse'
-            },
-            {
-              name: 'Confirm',
-              path: `/${this.lang}/${this.theme}` + '/n-confirm'
-            },
-            {
-              name: 'CustomInput',
+              name: 'Custom Input (in progress)',
              path: `/${this.lang}/${this.theme}` + '/n-custom-input'
            },
            {
-              name: 'DatePicker',
+              name: 'Date Picker',
              path: `/${this.lang}/${this.theme}` + '/n-date-picker'
            },
-            {
-              name: 'Descriptions',
-              path: `/${this.lang}/${this.theme}` + '/n-descriptions'
-            },
-            {
-              name: 'Divider',
-              path: `/${this.lang}/${this.theme}` + '/n-divider'
-            },
-            {
-              name: 'Drawer',
-              path: `/${this.lang}/${this.theme}` + '/n-drawer'
-            },
-            {
-              name: 'Dropdown',
-              path: `/${this.lang}/${this.theme}` + '/n-dropdown'
-            },
-            {
-              name: 'Empty',
-              path: `/${this.lang}/${this.theme}` + '/n-empty'
-            },
            {
              name: 'Form',
              path: `/${this.lang}/${this.theme}` + '/n-form'
            },
-            {
-              name: 'Form 2',
-              path: `/${this.lang}/${this.theme}` + '/n-new-form'
-            },
-            {
-              name: 'GradientText',
-              path: `/${this.lang}/${this.theme}` + '/n-gradient-text'
-            },
-            {
-              name: 'Grid',
-              path: `/${this.lang}/${this.theme}` + '/n-grid'
-            },
-            {
-              name: 'Icon',
-              path: `/${this.lang}/${this.theme}` + '/n-icon'
-            },
            {
              name: 'Input',
              path: `/${this.lang}/${this.theme}` + '/n-input'
            },
            {
-              name: 'InputNumber',
+              name: 'Input Number',
              path: `/${this.lang}/${this.theme}` + '/n-input-number'
            },
            {
-              name: 'Layout',
-              path: `/${this.lang}/${this.theme}` + '/n-layout'
+              name: 'Radio',
+              path: `/${this.lang}/${this.theme}` + '/n-radio'
+            },
+            {
+              name: 'Select',
+              path: `/${this.lang}/${this.theme}` + '/n-select'
+            },
+            {
+              name: 'Slider',
+              path: `/${this.lang}/${this.theme}` + '/n-slider'
+            },
+            {
+              name: 'Switch',
+              path: `/${this.lang}/${this.theme}` + '/n-switch'
+            },
+            {
+              name: 'Time Picker',
+              path: `/${this.lang}/${this.theme}` + '/n-time-picker'
+            },
+            {
+              name: 'Transfer',
+              path: `/${this.lang}/${this.theme}` + '/n-transfer'
+            }
+          ]
+        },
+        {
+          name: 'Data Display Components',
+          childItems: [
+            {
+              name: 'Table',
+              path: `/${this.lang}/${this.theme}` + '/n-table'
+            },
+            {
+              name: 'Code',
+              path: `/${this.lang}/${this.theme}` + '/n-code'
+            },
+            {
+              name: 'Descriptions',
+              path: `/${this.lang}/${this.theme}` + '/n-descriptions'
+            },
+            {
+              name: 'Empty',
+              path: `/${this.lang}/${this.theme}` + '/n-empty'
            },
            {
              name: 'List',
              path: `/${this.lang}/${this.theme}` + '/n-list'
            },
            {
-              name: 'LoadingBar',
+              name: 'Log',
+              path: `/${this.lang}/${this.theme}` + '/n-log'
+            },
+            {
+              name: 'Statistic',
+              path: `/${this.lang}/${this.theme}` + '/n-statistic'
+            },
+            {
+              name: 'Thing',
+              path: `/${this.lang}/${this.theme}` + '/n-thing'
+            },
+            {
+              name: 'Time',
+              path: `/${this.lang}/${this.theme}` + '/n-time'
+            },
+            {
+              name: 'Timeline',
+              path: `/${this.lang}/${this.theme}` + '/n-timeline'
+            },
+            {
+              name: 'Tree (in progress)',
+              path: `/${this.lang}/${this.theme}` + '/n-tree'
+            }
+          ]
+        },
+        {
+          name: 'Navigation Components',
+          childItems: [
+            {
+              name: 'Affix',
+              path: `/${this.lang}/${this.theme}` + '/n-affix'
+            },
+            {
+              name: 'Anchor',
+              path: `/${this.lang}/${this.theme}` + '/n-anchor'
+            },
+            {
+              name: 'BackTop',
+              path: `/${this.lang}/${this.theme}` + '/n-back-top'
+            },
+            {
+              name: 'Breadcrumb',
+              path: `/${this.lang}/${this.theme}` + '/n-breadcrumb'
+            },
+            {
+              name: 'Loading Bar',
              path: `/${this.lang}/${this.theme}` + '/n-loading-bar'
            },
            {
              name: 'Menu',
              path: `/${this.lang}/${this.theme}` + '/n-menu'
            },
+            {
+              name: 'Pagination',
+              path: `/${this.lang}/${this.theme}` + '/n-pagination'
+            },
+            {
+              name: 'Steps',
+              path: `/${this.lang}/${this.theme}` + '/n-steps'
+            },
+            {
+              name: 'Tabs',
+              path: `/${this.lang}/${this.theme}` + '/n-tabs'
+            }
+          ]
+        },
+        {
+          name: 'Feedback Components',
+          childItems: [
+            {
+              name: 'Alert',
+              path: `/${this.lang}/${this.theme}` + '/n-alert'
+            },
+            {
+              name: 'Badge',
+              path: `/${this.lang}/${this.theme}` + '/n-badge'
+            },
+            {
+              name: 'Confirm',
+              path: `/${this.lang}/${this.theme}` + '/n-confirm'
+            },
+            {
+              name: 'Drawer',
+              path: `/${this.lang}/${this.theme}` + '/n-drawer'
+            },
            {
              name: 'Message',
              path: `/${this.lang}/${this.theme}` + '/n-message'
@ -214,10 +312,6 @@ export default {
              name: 'Notification',
              path: `/${this.lang}/${this.theme}` + '/n-notification'
            },
-            {
-              name: 'Pagination',
-              path: `/${this.lang}/${this.theme}` + '/n-pagination'
-            },
            {
              name: 'Popover',
              path: `/${this.lang}/${this.theme}` + '/n-popover'
@ -234,73 +328,17 @@ export default {
              name: 'Progress',
              path: `/${this.lang}/${this.theme}` + '/n-progress'
            },
-            {
-              name: 'Radio',
-              path: `/${this.lang}/${this.theme}` + '/n-radio'
-            },
            {
              name: 'Result',
              path: `/${this.lang}/${this.theme}` + '/n-result'
            },
-            {
-              name: 'Select',
-              path: `/${this.lang}/${this.theme}` + '/n-select'
-            },
-            {
-              name: 'Slider',
-              path: `/${this.lang}/${this.theme}` + '/n-slider'
-            },
            {
              name: 'Spin',
              path: `/${this.lang}/${this.theme}` + '/n-spin'
            },
-            {
-              name: 'Statistic',
-              path: `/${this.lang}/${this.theme}` + '/n-statistic'
-            },
-            {
-              name: 'Steps',
-              path: `/${this.lang}/${this.theme}` + '/n-steps'
-            },
-            {
-              name: 'Switch',
-              path: `/${this.lang}/${this.theme}` + '/n-switch'
-            },
-            {
-              name: 'Tabs',
-              path: `/${this.lang}/${this.theme}` + '/n-tabs'
-            },
-            {
-              name: 'Table',
-              path: `/${this.lang}/${this.theme}` + '/n-table'
-            },
-            {
-              name: 'Tag',
-              path: `/${this.lang}/${this.theme}` + '/n-tag'
-            },
-            {
-              name: 'Time',
-              path: `/${this.lang}/${this.theme}` + '/n-time'
-            },
-            {
-              name: 'TimePicker',
-              path: `/${this.lang}/${this.theme}` + '/n-time-picker'
-            },
-            {
-              name: 'Timeline',
-              path: `/${this.lang}/${this.theme}` + '/n-timeline'
-            },
            {
              name: 'Tooltip',
              path: `/${this.lang}/${this.theme}` + '/n-tooltip'
-            },
-            {
-              name: 'Transfer',
-              path: `/${this.lang}/${this.theme}` + '/n-transfer'
-            },
-            {
-              name: 'Tree',
-              path: `/${this.lang}/${this.theme}` + '/n-tree'
            }
          ]
        },
@ -346,11 +384,28 @@ export default {
            {
              name: 'VerticalAlignDebug',
              path: `/${this.lang}/${this.theme}` + '/n-vertical-align-debug'
+            },
+            {
+              name: 'IconTransitionDebug',
+              path: `/${this.lang}/${this.theme}` + '/n-icon-transition-debug'
            }
          ]
        }
      ]
    },
+    flattenedItems () {
+      const flattenedItems = []
+      const traverse = items => {
+        if (items) {
+          items.forEach(item => {
+            if (item.childItems) traverse(item.childItems)
+            else flattenedItems.push(item)
+          })
+        }
+      }
+      traverse(this.items)
+      return flattenedItems
+    },
    lang: {
      get () {
        return this.$route.params.lang || 'en-us'
--- a/demo/documentation/components/ColumnGroup.vue
+++ b/demo/documentation/components/ColumnGroup.vue
@ -1,42 +0,0 @@
-<template>
-  <div class="doc">
-    <h1>一堆列 / n-column-group</h1>
-    <hr>
-    <h2>基本用法</h2>
-    <n-n-column-group cols="4">
-      <template v-slot:col(1)>
-        666
-      </template>
-      <template v-slot:col(2)>
-        666
-      </template>
-      <template v-slot:col(3)>
-        666
-      </template>
-      <template v-slot:col(4)>
-        666
-      </template>
-    </n-n-column-group>
-    <br>
-    <textarea rows="5">scaffold</textarea>
-    <hr>
-  </div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style scoped lang="scss">
-.doc {
-  width: 900px;
-  margin: auto;
-  textarea {
-    width: 100%;
-    min-height: 3em;
-  }
-}
-
-</style>
--- a/demo/documentation/components/advancedTable/enUS/basic.md
+++ b/demo/documentation/components/advancedTable/enUS/basic.md
@ -1,256 +0,0 @@
-# Basic
-
-```html
-<n-advance-table
-  ref="table"
-  :row-class-name="computeRowcls"
-  :columns="columns"
-  :data="data"
-  max-height="300px"
-  :search="search"
-  :pagination="{total:data.length,limit:10}"
-  class="n-table--basic"
-  @on-change="onChange"
-  @on-selected-change="onSelectedChange"
->
-  <div slot="table-operation-batch-left" style="padding-left:27px;">
-    <n-icon
-      v-show="selectedRow.length"
-      color="rgba(255,255,255,.7)"
-      type="md-trash"
-      size="24"
-      title="delete all"
-      style="cursor:pointer;"
-      @click="batchDelete"
-    />
-    <n-button
-      v-show="selectedRow.length"
-      color="rgba(255,255,255,.7)"
-      size="small"
-      @click="clearSelect"
-    >
-      clear select
-    </n-button>
-  </div>
-</n-advance-table>
-```
-
-```js
-const items = [
-  {
-    label: "greater than 15",
-    value: 15
-  },
-  {
-    label: "less then 14",
-    value: 14
-  }
-];
-const sex = [
-  {
-    label: "male",
-    value: "male"
-  },
-  {
-    label: "female",
-    value: "female"
-  }
-];
-const _columns3 = $this => {
-  return [
-    {
-      type: "selection",
-      disabled(params, index) {
-        return params.row.age < 8;
-      }
-      // fixed: 'left'
-    },
-    {
-      title: "Name",
-      key: "name",
-      sortable: true,
-      width: 300,
-      renderHeader(h, column) {
-        return <n-tag>{column.title}</n-tag>;
-      }
-    },
-    {
-      title: "Age",
-      key: "age",
-      width: 100,
-      sortable: true,
-      sorter(a, b) {
-        return a.age - b.age;
-      },
-      // filterMultiple: true,
-      filterItems: items,
-      onFilter: (value, record) => {
-        // value 为选中值, 请注意,value为了和过去版本兼容,无论单选或者多选都会返回一个数组,在未来的大版本更新中将会区分单选多选返回单值或数组
-        switch (value[0]) {
-          case 15:
-            return record.age > 15;
-          case 14:
-            return record.age < 14;
-        }
-      },
-      render: (h, params) => {
-        return <b>{params.row.age}</b>;
-      }
-    },
-    {
-      title: "Sex",
-      key: "sex",
-      width: 100,
-      onFilter: (values, record) => {
-        return values.includes(record.sex);
-      },
-      filterMultiple: true,
-      asyncFilterItems() {
-        return new Promise((resolve, reject) => {
-          setTimeout(() => {
-            Math.random() > 0.6
-              ? resolve(sex)
-              : reject(new Error("network error"));
-          }, 1000);
-        });
-      }
-    },
-    {
-      title: "#",
-      width: 200,
-      render: (h, params) => {
-        return (
-          <n-button
-            style="margin:0;"
-            size="small"
-            onClick={() => $this.handleDelete(params)}
-          >
-            delete
-          </n-button>
-        );
-      }
-    }
-  ];
-};
-export default {
-  components: {},
-  data() {
-    const columns = _columns3(this);
-
-    return {
-      selectedRow: [],
-      columns,
-      data: [],
-      query: {},
-      search: {
-        // 如果你不传入search.column,那么搜索框左侧的搜索选项不会显示
-        columns: [
-          { label: "Name", value: "name" },
-          { label: "Age", value: "age" }
-        ],
-        onSearch: (key, word, record) => {
-          switch (key) {
-            case "age":
-              return record["age"] === +word;
-            case "name":
-              return record["name"].includes(word);
-          }
-        },
-        placeholder: "search in local data"
-      }
-    };
-  },
-  mounted() {
-    this.data = this.getData();
-    // data一定要先有值才可以再selectRow
-    this.$refs.table.selectRow([1, 2, 5]);
-    // this.$refs.table.selectRow('all') // 可以全选当前展示数据
-  },
-  methods: {
-    clearSelect() {
-      this.$refs.table.clearSelect();
-    },
-    batchDelete() {
-      this.selectedRow.forEach(item => {
-        let index = item._index;
-        this.data[index] = null;
-      });
-      this.data = this.data.filter(item => item !== null);
-    },
-    computeRowcls(params) {
-      if (params.row.age > 15) {
-        return "age-too-old";
-      }
-      return "";
-    },
-    handleDelete(params) {
-      let index = params._index;
-      this.data.splice(index, 1);
-      this.$NMessage.success("Delete successfully,", { duration: 2000 });
-      this.$NMessage.warning("Data change,selected will be clear!", {
-        duration: 4000
-      });
-    },
-    getData(args) {
-      let d = new Array(20).fill(0);
-      d = d.map((item, idx) => {
-        return {
-          name: "xiaobai" + idx,
-          age: Math.ceil(Math.random() * 20),
-          sex: Math.random() > 0.5 ? "male" : "female"
-        };
-      });
-      return d;
-    },
-    onSelectedChange(selectedRow) {
-      console.log(selectedRow);
-      this.selectedRow = selectedRow;
-    },
-    onChange(args) {
-      /**
-       * "filter": {
-          "age": {
-            "value": [
-              15
-            ]
-          }
-        },
-        "sorter": {
-          "sortable": "custom",
-          "key": "age",
-          "type": -1,
-          "column": {
-            "title": "Age",
-            "key": "age",
-            "sortable": "custom",
-            "onFilter": "custom"
-          },
-          "i": 1
-        },
-        "pagination": {
-          "currentPage": 1,
-          "total": 20,
-          "limit": 10,
-          "custom": true
-        },
-        "search": {
-          "key": "name",
-          "word": "xiaobai"
-        }
-      }
-       */
-    },
-    clear() {
-      // 清除所有的Filter选项,会触发onchange事件
-      this.$refs.table.setParams({});
-      this.$NMessage.info("clear all filters", { duration: 5000 });
-    }
-  }
-};
-```
-
-```css
-.age-too-old {
-  color: rgba(255, 255, 255, 0.3);
-}
-```
--- a/demo/documentation/components/advancedTable/enUS/column.md
+++ b/demo/documentation/components/advancedTable/enUS/column.md
@ -1,195 +0,0 @@
-# Column
-```html
-<n-advance-table
-  :columns="columns"
-  :data="data"
-/>
-```
-```js
-const _columns3 = ($this) => {
-  return [
-    {
-      title: '属性',
-      key: 'name',
-      width: 180
-
-    },
-    {
-      title: '说明',
-      key: 'desc',
-      width: 500,
-      render (h, params) {
-        return <pre class="n-table-props-desc">
-          {params.row.desc}
-        </pre>
-      }
-    },
-    {
-      title: '类型',
-      key: 'type',
-      width: 200
-
-    },
-    {
-      title: '默认值',
-      key: 'default',
-      width: 100,
-      render (h, params) {
-        return <pre class="n-table-props-desc">
-          {params.row.default}
-        </pre>
-      }
-    }
-  ]
-}
-const data = [
-  {
-    name: 'title',
-    desc: '列头显示文字',
-    type: 'String',
-    default: ``
-  },
-  {
-    name: 'key',
-    desc: '对应列内容的字段名',
-    type: 'String',
-    default: ``
-  },
-  {
-    name: 'width',
-    desc: '列宽',
-    type: 'Number',
-    default: ''
-  },
-  {
-    name: 'align',
-    desc: `对齐方式，可选值为 left 左对齐、right 右对齐和 center 居中对齐`,
-    type: 'String',
-    default: ``
-  },
-  {
-    name: 'className',
-    desc: `列的样式名称
-    传入函数可以根据行数据进行判断返回相应的classname
-    (params)=>{return 'classname'}
-    -----
-    传入字符串将会所有的都设置同样的classname
-    `,
-    type: 'Function | String',
-    default: ``
-  },
-  {
-    name: 'sortable',
-    desc: '当前列是否排序,sortable===custom 触发on-change进行远程排序,sortable==true使用本地排序,',
-    type: 'String, Boolean',
-    default: `false`
-  },
-  {
-    name: 'sorter',
-    desc: `
-    本地排序的自定义排序函数,若没有将使用默认的字符串比较排序
-    example:
-    // a,b为rowData
-    (a, b) => {
-          return a.age - b.age;
-    },
-    `,
-    type: 'Function',
-    default: ``
-  },
-  {
-    name: 'ellipsis',
-    desc: '文本不换行,超出部分显示省略号',
-    type: 'Boolean',
-    default: `false`
-  },
-  {
-    name: 'render',
-    desc: '自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row,_index,包含行数据,数据的索引',
-    type: 'number | string',
-    default: `auto`
-  },
-  {
-    name: 'onFilter',
-    desc: `过滤筛选 onFilter===custom 触发on-change进行远程排序,onFilter==function使用本地排序
-    example:
-    // value为选中的值,record为行数据
-    (value, record) => {
-          // value 为选中值, 请注意,value为了和过去版本兼容,无论单选或者多选都会返回一个数组,在未来的大版本更新中将会区分单选多选返回单值或数组
-          switch (value[0]) {
-            case 15:
-              return record.age > 15;
-            case 14:
-              return record.age < 14;
-          }
-    }`,
-    type: 'Function | String',
-    default: ``
-  },
-  {
-    name: 'filterItems',
-    desc: `过滤的选项列表 与onFilter一起使用,否则无效
-    example:
-    [
-      {
-        label:'age 15',
-        value: '15'
-      },
-      {
-        label:'age 14',
-        value: '14'
-      }
-    ]
-    `,
-    type: 'Array',
-    default: ``
-  },
-  {
-    name: 'filterMultiple',
-    desc: `是否开启多选过滤`,
-    type: 'Boolean',
-    default: `false`
-  },
-  {
-    name: 'asyncFilterItems',
-    desc: `异步获取过滤的选项列表 与onFilter一起使用,否则无效,
-    example:
-    注意: 此函数需要返回如下格式:
-    [
-      {
-        label:'age 15',
-        value: '15'
-      },
-      {
-        label:'age 14',
-        value: '14'
-      }
-    ]
-
-    asyncFilterItems() {
-      return fetch('/filteritems')
-    }
-    `,
-    type: 'async Function',
-    default: ``
-  }
-
-]
-export default {
-  components: {
-  },
-  data () {
-    const columns = _columns3(this)
-
-    return {
-      columns,
-      data
-    }
-  }
-}
-```
-```css
-.n-table-props-desc {
-  white-space:pre-wrap;
-}
-```
--- a/demo/documentation/components/advancedTable/enUS/event.md
+++ b/demo/documentation/components/advancedTable/enUS/event.md
@ -1,182 +0,0 @@
-<!--
- * @Author: Volankey@gmail.com
- * @Company: Tusimple
- * @Date: 2019-10-24 16:36:44
- * @LastEditors: Jiwen.bai
- * @LastEditTime: 2019-10-24 16:37:22
- -->
-
-# Event
-
-```html
-<n-advance-table :columns="columns" :data="data" />
-```
-
-```js
-const _columns3 = $this => {
-  return [
-    {
-      title: '名称',
-      key: 'name'
-    },
-    {
-      title: '说明',
-      key: 'desc'
-    },
-    {
-      title: '返回值',
-      key: 'returns',
-      render(h, params) {
-        const arr = params.row.returns.map(item => {
-          return (
-            <li>
-              {item.name} <pre>{item.desc}</pre>
-            </li>
-          )
-        })
-        return <ul>{arr}</ul>
-      }
-    }
-  ]
-}
-const data = [
-  {
-    name: 'on-change',
-    desc:
-      '远程事件触发(排序,搜索,分页,过滤等 custom=true的条件下),可在这里调用获取data数据,改变data',
-    returns: [
-      {
-        name: 'filtersData',
-        desc: `
-      example:
-      {
-        "filter": {
-          "age": {
-            "value": [
-              15
-            ]
-          }
-        },
-        "sorter": {
-          "sortable": "custom",
-          "key": "age",
-          "type": -1,
-          "column": {
-            "title": "Age",
-            "key": "age",
-            "sortable": "custom",
-            "onFilter": "custom"
-          },
-          "i": 1
-        },
-        "pagination": {
-          "currentPage": 1,
-          "total": 20,
-          "limit": 10,
-          "custom": true
-        },
-        "search": {
-          "key": "name",
-          "word": "xiaobai"
-        }
-      }`
-      }
-    ]
-  },
-  {
-    name: 'on-page-change',
-    desc: '页码发生改变触发',
-    returns: [
-      {
-        name: 'paginationer',
-        desc: `
-        {
-          "currentPage": ,
-          "total": ,
-          "limit": ,
-          "custom":
-        },`
-      }
-    ]
-  },
-  {
-    name: 'on-filter-change',
-    desc: '过滤数据发生改变触发',
-    returns: [
-      {
-        name: 'filter',
-        desc: `
-      example:
-      {
-        "age": {
-          "value": [
-            15,14
-          ]
-        }
-      }`
-      }
-    ]
-  },
-  {
-    name: 'on-selected-change',
-    desc: 'checkbox选中项发生改变',
-    returns: [
-      {
-        name: '选中的行数据,数组'
-      }
-    ]
-  },
-  {
-    name: 'on-sort-change',
-    desc: '排序数据发生改变触发',
-    returns: [
-      {
-        name: 'sorter',
-        desc: `
-      example:
-      {
-          "sortable": "custom",
-          "key": "age",
-          "type": -1,
-          "column": {
-            "title": "Age",
-            "key": "age",
-            "sortable": "custom",
-            "onFilter": "custom"
-          },
-          "i": 1
-      }
-      `
-      }
-    ]
-  }
-]
-export default {
-  components: {},
-  data() {
-    const columns = _columns3(this)
-
-    return {
-      columns,
-      data,
-      query: {},
-      search: {
-        // 如果你不传入search.column,那么搜索框左侧的搜索选项不会显示
-        columns: [
-          { label: 'Name', value: 'name' },
-          { label: 'Age', value: 'age' }
-        ],
-        onSearch: (key, word, record) => {
-          switch (key) {
-            case 'age':
-              return record['age'] === +word
-            case 'name':
-              return record['name'].includes(word)
-          }
-        },
-        placeholder: 'search in local data'
-      }
-    }
-  }
-}
-```
--- a/demo/documentation/components/advancedTable/enUS/index.md
+++ b/demo/documentation/components/advancedTable/enUS/index.md
@ -1,13 +0,0 @@
-# Advanced Table
-
-<!--single-column-->
-
-```demo
-basic
-column
-event
-senior-usage
-slot-usage
-table-methods
-table-props
-```
--- a/demo/documentation/components/advancedTable/enUS/seniorUsage.md
+++ b/demo/documentation/components/advancedTable/enUS/seniorUsage.md
@ -1,245 +0,0 @@
-<!--
- * @Author: Volankey@gmail.com
- * @Company: Tusimple
- * @Date: 2019-10-23 15:59:41
- * @LastEditors: Jiwen.bai
- * @LastEditTime: 2019-11-07 13:52:07
- -->
-
-# Senior Usage
-
-```html
-<n-advance-table
-  ref="table"
-  :loading="loading"
-  :columns="columns"
-  :data="data"
-  max-height="300px"
-  :search="search"
-  :pagination="pagination"
-  @on-change="onChange"
-  @on-filter-change="onFilterChange"
-  :max-width="480"
->
-  <div slot="table-operation-batch-left">
-    <n-button size="small" @click="clear">
-      clear all filters
-    </n-button>
-  </div>
-</n-advance-table>
-<h1>Network params</h1>
-<pre>{{ query }}</pre>
-```
-
-```js
-const items = [
-  {
-    label: "age 15 asdsadsadsadsad",
-    value: 15
-  },
-  {
-    label: "age 14",
-    value: 14
-  },
-  {
-    label: "age 13",
-    value: 13
-  },
-  {
-    label: "age 12",
-    value: 12
-  },
-  {
-    label: "age 11",
-    value: 11
-  }
-];
-const sex = [
-  {
-    label: "male",
-    value: "male"
-  },
-  {
-    label: "female",
-    value: "female"
-  }
-];
-const _columns3 = $this => {
-  return [
-    {
-      type: "selection",
-      fixed: "left"
-    },
-    {
-      title: "Name",
-      key: "name",
-      sortable: true,
-      sorter: "custom",
-      onFilter: (value, record) => {
-        return value.includes(record.name + "");
-      },
-      width: 150,
-      fixed: "left"
-    },
-    {
-      title: "Age",
-      key: "age",
-      width: 100,
-
-      sortable: true,
-      sorter(a, b) {
-        return a.age - b.age;
-      },
-      filterable: true,
-      filterMultiple: true,
-      asyncFilterItems() {
-        return new Promise((resolve, reject) => {
-          setTimeout(() => {
-            // 模拟概率发生错误
-            Math.random() > 0.6
-              ? resolve(items)
-              : reject(new Error("network error"));
-          }, 1000);
-        });
-      },
-      filter: "custom",
-      render: (h, params) => {
-        return <b>{params.row.age}</b>;
-      }
-    },
-    {
-      title: "Sex",
-      key: "sex",
-      width: 100,
-      filterable: true,
-      filter: (values, record) => {
-        return values.includes(record.sex);
-      },
-      filterMultiple: true,
-      asyncFilterItems() {
-        return new Promise((resolve, reject) => {
-          setTimeout(() => {
-            Math.random() > 0.6
-              ? resolve(sex)
-              : reject(new Error("network error"));
-          }, 1000);
-        });
-      }
-    },
-    {
-      title: "#",
-      width: 150,
-      fixed: "right",
-      render: (h, params) => {
-        return (
-          <n-button
-            style="margin:0;"
-            size="small"
-            onClick={() => this.handleClick(params)}
-          >
-            delete
-          </n-button>
-        );
-      }
-    }
-  ];
-};
-export default {
-  components: {},
-  data() {
-    const columns = _columns3(this);
-    return {
-      loading: false,
-      data: [],
-      query: {},
-      columns,
-      search: {
-        columns: [
-          { label: "Name", value: "name" },
-          { label: "Age", value: "age" }
-        ],
-        onSearch: "custom",
-        placeholder: "search from net"
-      }
-    };
-  },
-  computed: {
-    pagination() {
-      return {
-        total: this.data.length,
-        limit: 10,
-        custom: true
-      };
-    }
-  },
-  mounted() {
-    this.$refs.table.setParams({
-      filter: { age: [15] },
-      sorter: { key: "name", type: -1 }
-    });
-  },
-  methods: {
-    getData(args) {
-      this.loading = true;
-      setTimeout(() => {
-        let d = new Array(20).fill(0);
-        d = d.map((item, idx) => {
-          return {
-            name: "xiaobai213213132123213111121" + idx,
-            age: Math.ceil(Math.random() * 20),
-            sex: Math.random() > 0.5 ? "male" : "female"
-          };
-        });
-        this.data = d;
-        this.loading = false;
-      }, 3000);
-    },
-    onChange(args) {
-      console.log("reomte change");
-      this.query = args;
-      console.log("TCL: onChange -> args", args);
-      /**
-       * "filter": {
-          "age": {
-            "value": [
-              15
-            ]
-          }
-        },
-        "sorter": {
-          "sortable": "custom",
-          "key": "age",
-          "type": -1,
-          "column": {
-            "title": "Age",
-            "key": "age",
-            "sortable": "custom",
-            "onFilter": "custom"
-          },
-          "i": 1
-        },
-        "pagination": {
-          "currentPage": 1,
-          "total": 20,
-          "limit": 10,
-          "custom": true
-        },
-        "search": {
-          "key": "name",
-          "word": "xiaobai"
-        }
-      }
-       */
-      this.getData(args);
-    },
-    onFilterChange(data) {
-      console.log("TCL: onFilterChange -> data", data);
-    },
-    clear() {
-      // 清除所有的Filter选项,会触发onchange事件
-      this.$refs.table.setParams({});
-      this.$NMessage.info("clear all filters", { duration: 5000 });
-    }
-  }
-};
-```
--- a/demo/documentation/components/advancedTable/enUS/slotUsage.md
+++ b/demo/documentation/components/advancedTable/enUS/slotUsage.md
@ -1,189 +0,0 @@
-# Slot Usage
-
-```html
-<n-advance-table
-  :columns="columns"
-  :data="data"
-  max-height="300px"
-  :search="search"
-  :pagination="{total:data.length,limit:10}"
-  @on-change="onChange"
->
-  <template #append>
-    <div style="text-align:center;">slot name: append</div>
-  </template>
-</n-advance-table>
-```
-
-```js
-const items = [
-  {
-    label: "greater than 15",
-    value: 15
-  },
-  {
-    label: "less then 14",
-    value: 14
-  }
-];
-const sex = [
-  {
-    label: "male",
-    value: "male"
-  },
-  {
-    label: "female",
-    value: "female"
-  }
-];
-const _columns3 = $this => {
-  return [
-    {
-      title: "Name",
-      key: "name",
-      sortable: true
-    },
-    {
-      title: "Age",
-      key: "age",
-      sortable: true,
-      sorter(a, b) {
-        return a.age - b.age;
-      },
-      // filterMultiple: true,
-      filterItems: items,
-      onFilter: (value, record) => {
-        // value 为选中值, 请注意,value为了和过去版本兼容,无论单选或者多选都会返回一个数组,在未来的大版本更新中将会区分单选多选返回单值或数组
-        switch (value[0]) {
-          case 15:
-            return record.age > 15;
-          case 14:
-            return record.age < 14;
-        }
-      },
-      render: (h, params) => {
-        return <b>{params.row.age}</b>;
-      }
-    },
-    {
-      title: "Sex",
-      key: "sex",
-      onFilter: (values, record) => {
-        return values.includes(record.sex);
-      },
-      filterMultiple: true,
-      asyncFilterItems() {
-        return new Promise((resolve, reject) => {
-          setTimeout(() => {
-            Math.random() > 0.6
-              ? resolve(sex)
-              : reject(new Error("network error"));
-          }, 1000);
-        });
-      }
-    },
-    {
-      title: "#",
-      render: (h, params) => {
-        return (
-          <n-button
-            style="margin:0;"
-            size="small"
-            onClick={() => $this.handleDelete(params)}
-          >
-            delete
-          </n-button>
-        );
-      }
-    }
-  ];
-};
-export default {
-  components: {},
-  data() {
-    const columns = _columns3(this);
-
-    return {
-      columns,
-      data: [],
-      query: {},
-      search: {
-        // 如果你不传入search.column,那么搜索框左侧的搜索选项不会显示
-        columns: [
-          { label: "Name", value: "name" },
-          { label: "Age", value: "age" }
-        ],
-        onSearch: (key, word, record) => {
-          switch (key) {
-            case "age":
-              return record["age"] === +word;
-            case "name":
-              return record["name"].includes(word);
-          }
-        },
-        placeholder: "search in local data"
-      }
-    };
-  },
-  mounted() {
-    this.data = this.getData();
-  },
-  methods: {
-    handleDelete(params) {
-      let index = params._index;
-      this.data.splice(index, 1);
-      this.$NMessage.success("Delete successfully", { duration: 2000 });
-    },
-    getData(args) {
-      let d = new Array(20).fill(0);
-      d = d.map((item, idx) => {
-        return {
-          name: "xiaobai" + idx,
-          age: Math.ceil(Math.random() * 20),
-          sex: Math.random() > 0.5 ? "male" : "female"
-        };
-      });
-      return d;
-    },
-    onChange(args) {
-      /**
-       * "filter": {
-          "age": {
-            "value": [
-              15
-            ]
-          }
-        },
-        "sorter": {
-          "sortable": "custom",
-          "key": "age",
-          "type": -1,
-          "column": {
-            "title": "Age",
-            "key": "age",
-            "sortable": "custom",
-            "onFilter": "custom"
-          },
-          "i": 1
-        },
-        "pagination": {
-          "currentPage": 1,
-          "total": 20,
-          "limit": 10,
-          "custom": true
-        },
-        "search": {
-          "key": "name",
-          "word": "xiaobai"
-        }
-      }
-       */
-    },
-    clear() {
-      // 清除所有的Filter选项,会触发onchange事件
-      this.$refs.table.setParams({});
-      this.$NMessage.info("clear all filters", { duration: 5000 });
-    }
-  }
-};
-```
--- a/demo/documentation/components/advancedTable/enUS/tableMethods.md
+++ b/demo/documentation/components/advancedTable/enUS/tableMethods.md
@ -1,78 +0,0 @@
-# Methods
-
-```html
-<n-advance-table :columns="columns" :data="data" />
-```
-
-```js
-const _columns3 = $this => {
-  return [
-    {
-      title: "名称",
-      key: "name"
-    },
-    {
-      title: "说明",
-      key: "desc"
-    },
-    {
-      title: "参数",
-      key: "params",
-      render(h, params) {
-        const arr = params.row.params.map(item => {
-          return (
-            <li>
-              {item.name} <pre>{item.desc}</pre>
-            </li>
-          );
-        });
-        return <ul>{arr}</ul>;
-      }
-    }
-  ];
-};
-const data = [
-  {
-    name: "setParams",
-    desc:
-      "可以在mounted里setParams设置初始的sort,page,filter,search等,此操作会触发on-change事件,请在on-change里进行数据更新",
-    params: [
-      {
-        name: "filterData",
-        desc: `
-          {
-           filter: { age: [15] }  or null, 
-           sorter: { key: 'age', type: -1 }  or null, 
-           searcher: { key: 'name', value: 'xiaobai' }  or null,
-           page: 2 or null
-          }
-          `
-      }
-    ]
-  },
-  {
-    name: "toggleRowSelection",
-    desc:
-      "可以在mounted里selectRow来进行选中某一行,当为字符串all时,选中当前显示所有行,当为数组时,选中行号-1的行(注意data数据要已经存在)",
-    params: [
-      {
-        name: "rowIndexs Array, selected = true|false",
-        desc: `
-            [0,1,2]
-          `
-      }
-    ]
-  }
-];
-export default {
-  components: {},
-  data() {
-    const columns = _columns3(this);
-
-    return {
-      columns,
-      data
-    };
-  }
-};
-```
--- a/demo/documentation/components/advancedTable/enUS/tableProps.md
+++ b/demo/documentation/components/advancedTable/enUS/tableProps.md
@ -1,182 +0,0 @@
-<!--
- * @Author: Volankey@gmail.com
- * @Company: Tusimple
- * @Date: 2019-10-24 16:38:36
- * @LastEditors: Jiwen.bai
- * @LastEditTime: 2019-10-24 16:40:05
- -->
-
-# Props
-
-```html
-<n-advance-table :columns="columns" :data="data" />
-```
-
-```js
-const _columns3 = $this => {
-  return [
-    {
-      title: "属性",
-      key: "name",
-      width: 180
-    },
-    {
-      title: "说明",
-      key: "desc",
-      width: 500,
-      render(h, params) {
-        return <pre class="n-table-props-desc">{params.row.desc}</pre>;
-      }
-    },
-    {
-      title: "类型",
-      key: "type",
-      width: 200
-    },
-    {
-      title: "默认值",
-      key: "default",
-      width: 500,
-      render(h, params) {
-        return <pre class="n-table-props-desc">{params.row.default}</pre>;
-      }
-    }
-  ];
-};
-const data = [
-  {
-    name: "columns",
-    desc: "表格列配置项",
-    type: "Array",
-    default: `[]`
-  },
-  {
-    name: "loading",
-    desc: "表格是否加载中",
-    type: "boolean",
-    default: `false`
-  },
-  {
-    name: "max-width",
-    desc: "表格最大宽度,超出显示横向滚动条",
-    type: "[String|Number]",
-    default: `unset`
-  },
-  {
-    name: "max-height",
-    desc: "最大高度,超出后会固定头部,并显示滚动条",
-    type: "number | string",
-    default: `auto`
-  },
-  {
-    name: "data",
-    desc: "显示的结构化数据",
-    type: "Array",
-    default: "[]"
-  },
-  {
-    name: "row-class-name",
-    desc: `行的css className
-            当为Function时传入参数是
-            - {row,_index} 行数据以及在源data数据中的索引
-            - index行索引`,
-    type: "[Array, String, Object, Function]",
-    default: `''`
-  },
-  {
-    name: "pagination",
-    desc: "分页功能",
-    type: "Object, Boolean",
-    default: `
-    example1: 远程分页触发on-change事件
-        "pagination": {
-          "total": 20,//items总数
-          "limit": 10,//每页显示数量
-          "custom": true,
-          pageSlot:5,
-          quickJumper:true
-        },
-    -----------
-    example2: 本地分页
-      "pagination": {
-          "total": 20,
-          "limit": 10,
-        },
-    `
-  },
-  {
-    name: "minHeight",
-    desc: "最小高度",
-    type: "number | string",
-    default: `unset`
-  },
-  {
-    name: "maxHeight",
-    desc: "最大高度,超出后会固定头部,并显示滚动条",
-    type: "number | string",
-    default: `auto`
-  },
-  {
-    name: "被废弃的onChange",
-    desc: "同event中的on-change,未来将会被废弃!",
-    type: "Function",
-    default: `()=>{}`
-  },
-  {
-    name: "被废弃的search",
-    desc: `是否显示搜索,如果传入一个Object格式需要如下:
-      example1: 本地搜索
-      {
-        // 如果你不传入search.column,那么搜索框左侧的搜索选项不会显示
-        columns: [
-          { label: 'Name',
-            value: 'name' },
-          { label: 'Age',
-            value: 'age' }
-        ],
-        onSearch: (key, word, record) => {
-          switch (key) {
-            case 'age':
-              return record['age'] === +word
-            case 'name':
-              return record['name'].includes(word)
-          }
-        },
-        placeholder: 'search in local data'
-      }
-      --------
-      example2: 远程搜索
-       {
-        // 如果你不传入search.column,那么搜索框左侧的搜索选项不会显示
-        columns: [
-          { label: 'Name',
-            value: 'name' },
-          { label: 'Age',
-            value: 'age' }
-        ],
-        onSearch: 'custom', //触发on-change事件进行网络搜索
-        placeholder: 'search in local data'
-      }
-    `,
-    type: "Object,Boolean",
-    default: `false`
-  }
-];
-export default {
-  components: {},
-  data() {
-    const columns = _columns3(this);
-
-    return {
-      columns,
-      data
-    };
-  }
-};
-```
-
-```css
-.n-table-props-desc {
-  white-space: pre-wrap;
-}
-```
--- a/demo/documentation/components/affix/enUS/basic.md
+++ b/demo/documentation/components/affix/enUS/basic.md
@ -1,12 +1,17 @@
 # Basic
+Affix has `offset-top`, `top`, `offset-bottom` and `bottom`. `offset-top` is top affixing trigger point. `top` is the style `top` value after top affixing is trigger. `offset-bottom` and `bottom` work in similar way.
 ```html
 <div class="container">
  <div class="padding"></div>
  <div class="content">
-    <n-affix :top="60"><n-tag>Top 50px</n-tag></n-affix>
-    <!-- <n-affix :bottom="60" style="margin-left: 80px"><n-tag>Bottom 50px</n-tag></n-affix>
-    <n-affix :top="60" :bottom="60" style="margin-left: 200px"><n-tag>Top 50px & Bottom 50px</n-tag></n-affix> -->
-    <!-- <n-affix :bottom="60"><n-tag>Bottom 60px</n-tag></n-affix> -->
+    <n-row>
+      <n-col :span="12">
+        <n-affix :top="120" :offset-top="60"><n-tag>Top 60px</n-tag></n-affix>
+      </n-col>
+      <n-col :span="12">
+        <n-affix :bottom="120" :offset-bottom="60"><n-tag>Bottom 60px</n-tag></n-affix>
+      </n-col>
+    </n-row>
  </div>
 </div>
 ```
@ -17,7 +22,6 @@
  background-color: rgba(128, 128, 128, .3);
  border-radius: 6px;
  overflow: auto;
-  position: relative;
 }

 .padding {
--- a/demo/documentation/components/affix/enUS/index.md
+++ b/demo/documentation/components/affix/enUS/index.md
@ -1,4 +1,5 @@
 # Affix
 ```demo
 basic
+position
 ```
--- a/demo/documentation/components/affix/enUS/position.md
+++ b/demo/documentation/components/affix/enUS/position.md
@ -0,0 +1,43 @@
+# Position
+Affix can be `absolute` or `fix` positioned. You may need some css tricks to make it works as following. By default position is set to `fix`, because in most cases scrolled element is `#document`.
+```html
+<div class="absolute-anchor-container">
+  <div class="container">
+    <div class="padding"></div>
+    <div class="content">
+      <n-row>
+        <n-col :span="12">
+          <n-affix :offset-top="60" position="absolute"><n-tag>Top 50px</n-tag></n-affix>
+        </n-col>
+        <n-col :span="12">
+          <n-affix :offset-bottom="60" position="absolute"><n-tag>Bottom 60px</n-tag></n-affix>
+        </n-col>
+      </n-row>
+    </div>
+  </div>
+</div>
+```
+```css
+.absolute-anchor-container {
+  width: 100%;
+  height: 200px;
+  position: relative;
+}
+
+.container {
+  height: 200px;
+  background-color: rgba(128, 128, 128, .3);
+  border-radius: 6px;
+  overflow: auto;
+}
+
+.padding {
+  height: 150px;
+  width: 100%;
+  background-color: rgba(128, 128, 128, .15);
+}
+
+.content {
+  height: 600px;
+}
+```
--- a/demo/documentation/components/alert/enUS/basic.md
+++ b/demo/documentation/components/alert/enUS/basic.md
@ -1,5 +1,13 @@
 # Basic
 ```html
+<n-alert title="Info Text" type="default">
+  <template v-slot:icon>
+    <n-icon>
+      <ios-airplane />
+    </n-icon>
+  </template>
+  Gee it's good to be back home
+</n-alert>
 <n-alert title="Info Text" type="info">
  Gee it's good to be back home
 </n-alert>
@ -13,6 +21,15 @@
  I'm back in the U.S.S.R.
 </n-alert>
 ```
+```js
+import iosAirplane from 'naive-ui/lib/icons/ios-airplane'
+
+export default {
+  components: {
+    iosAirplane
+  }
+}
+```
 ```css
 .n-alert {
  margin-bottom: 12px;
--- a/demo/documentation/components/alert/enUS/closable.md
+++ b/demo/documentation/components/alert/enUS/closable.md
@ -0,0 +1,42 @@
+# Closable
+```html
+<n-alert title="Info Text" type="default" closable>
+  <template v-slot:icon>
+    <n-icon>
+      <ios-airplane />
+    </n-icon>
+  </template>
+  Gee it's good to be back home
+</n-alert>
+<n-alert title="Info Text" type="info" closable>
+  Gee it's good to be back home
+</n-alert>
+<n-alert title="Success Text" type="success" closable>
+  Leave it till tomorrow to unpack my case
+</n-alert>
+<n-alert title="Warning Text" type="warning" closable>
+  Honey disconnect the phone
+</n-alert>
+<n-alert title="Error Text" type="error" closable>
+  I'm back in the U.S.S.R.
+</n-alert>
+```
+```js
+import iosAirplane from 'naive-ui/lib/icons/ios-airplane'
+
+export default {
+  components: {
+    iosAirplane
+  },
+  data () {
+    return {
+      show: true
+    }
+  }
+}
+```
+```css
+.n-alert {
+  margin-bottom: 12px;
+}
+```
--- a/demo/documentation/components/alert/enUS/customIcon.md
+++ b/demo/documentation/components/alert/enUS/customIcon.md
@ -1,29 +0,0 @@
-# Custom Icon
-Use custom icon such as image.
-```html
-<n-alert>
-  <template v-slot:icon>
-    <img
-      src="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOS44IDE4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmOTJhNDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkFsZXJ0IC0gSWNvbiAyPC90aXRsZT48ZyBpZD0iUGFnZS0xIj48ZyBpZD0iR3JvdXAtNC1Db3B5LTQiPjxnIGlkPSJHcm91cC01Ij48ZyBpZD0iTm90aWZpY2F0aW9uIj48cGF0aCBpZD0iU2hhcGUiIGNsYXNzPSJjbHMtMSIgZD0iTS43NSw1LjE5QTEuMzQsMS4zNCwwLDAsMCwwLDYuMzF2NS42MUExLjMsMS4zLDAsMCwwLC43NiwxM2wxMiw0LjkxYS41MS41MSwwLDAsMCwuNzYtLjQ5Vi41NGEuNDkuNDksMCwwLDAtLjc1LS40OFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xNS4zLDQuNWE0LjUsNC41LDAsMCwxLDAsOSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIvPjwvZz48L2c+PC9nPjwvZz48L3N2Zz4="
-      style="height: 19px; width: 19px;"
-    />
-  </template>
-  You don't know how lucky you are boy
-</n-alert>
-<n-alert title="Back in the U.S.S.R." type="error">
-  <template v-slot:icon>
-    <img
-      src="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOS44IDE4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmOTJhNDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkFsZXJ0IC0gSWNvbiAyPC90aXRsZT48ZyBpZD0iUGFnZS0xIj48ZyBpZD0iR3JvdXAtNC1Db3B5LTQiPjxnIGlkPSJHcm91cC01Ij48ZyBpZD0iTm90aWZpY2F0aW9uIj48cGF0aCBpZD0iU2hhcGUiIGNsYXNzPSJjbHMtMSIgZD0iTS43NSw1LjE5QTEuMzQsMS4zNCwwLDAsMCwwLDYuMzF2NS42MUExLjMsMS4zLDAsMCwwLC43NiwxM2wxMiw0LjkxYS41MS41MSwwLDAsMCwuNzYtLjQ5Vi41NGEuNDkuNDksMCwwLDAtLjc1LS40OFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xNS4zLDQuNWE0LjUsNC41LDAsMCwxLDAsOSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIvPjwvZz48L2c+PC9nPjwvZz48L3N2Zz4="
-      style="height: 19px; width: 19px;"
-    />
-  </template>
-  Back in the U.S.<br />
-  Back in the U.S.<br />
-  Back in the U.S.S.R.
-</n-alert>
-```
-```css
-.n-alert {
-  margin-bottom: 12px;
-}
-```
--- a/demo/documentation/components/alert/enUS/index.md
+++ b/demo/documentation/components/alert/enUS/index.md
@ -1,7 +1,7 @@
 # Alert
 ```demo
 basic
+closable
 icon
-custom-icon
 no-icon
 ```
--- a/demo/documentation/components/anchor/enUS/affix.md
+++ b/demo/documentation/components/anchor/enUS/affix.md
@ -0,0 +1,15 @@
+# Affix
+When in affix mode, Anchor can recieve addition props as same as Affix.
+```html
+<div style="height: 200px;">
+  <n-anchor affix :offset-top="24" :top="88" style="z-index: 1;">
+    <n-anchor-link title="The Narrator" href="#the-narrator"/>
+    <n-anchor-link title="The Narrator's Shadow" href="#the-narrator-s-shadow"/>
+    <n-anchor-link title="The Gatekeeper" href="#the-gatekeeper"/>
+    <n-anchor-link title="The Librarian" href="#the-librarian">
+      <n-anchor-link title="The Colonel" href="#the-colonel"/>
+      <n-anchor-link title="The Caretaker" href="#the-caretaker"/> 
+    </n-anchor-link>
+  </n-anchor>
+</div>
+```
--- a/demo/documentation/components/anchor/enUS/basic.md
+++ b/demo/documentation/components/anchor/enUS/basic.md
@ -1,13 +1,14 @@
 # Basic
 ```html
-<div style="height: 200px; padding-left: 200px;">
-  <n-anchor affix :top="80" style="z-index: 1;">
+<div style="height: 200px;">
+  <n-anchor>
    <n-anchor-link title="The Narrator" href="#the-narrator"/>
    <n-anchor-link title="The Narrator's Shadow" href="#the-narrator-s-shadow"/>
    <n-anchor-link title="The Gatekeeper" href="#the-gatekeeper"/>
-    <n-anchor-link title="The Librarian" href="#the-librarian"/>
-    <n-anchor-link title="The Colonel" href="#the-colonel"/>
-    <n-anchor-link title="The Caretaker" href="#the-caretaker"/>  
+    <n-anchor-link title="The Librarian" href="#the-librarian">
+      <n-anchor-link title="The Colonel" href="#the-colonel"/>
+      <n-anchor-link title="The Caretaker" href="#the-caretaker"/> 
+    </n-anchor-link>
  </n-anchor>
 </div>
 ```
--- a/demo/documentation/components/anchor/enUS/index.md
+++ b/demo/documentation/components/anchor/enUS/index.md
@ -2,6 +2,8 @@
 <!--single-column-->
 ```demo
 basic
+affix
+scrollto
 the-narrator
 the-narrator-s-shadow
 the-gatekeeper
--- a/demo/documentation/components/anchor/enUS/placeholder.md
+++ b/demo/documentation/components/anchor/enUS/placeholder.md
@ -1,4 +1,4 @@
 # Placeholder
 ```html
-<div style="height: 600px;"></div>
+<div style="height: 1200px;"></div>
 ```
--- a/demo/documentation/components/anchor/enUS/scrollto.md
+++ b/demo/documentation/components/anchor/enUS/scrollto.md
@ -0,0 +1,32 @@
+# Scroll To
+```html
+<div style="height: 200px; padding-left: 200px;">
+  <n-anchor affix :offset-top="24" :top="88" style="z-index: 1;" ref="anchor">
+    <n-anchor-link title="The Narrator" href="#the-narrator"/>
+    <n-anchor-link title="The Narrator's Shadow" href="#the-narrator-s-shadow"/>
+    <n-anchor-link title="The Gatekeeper" href="#the-gatekeeper"/>
+    <n-anchor-link title="The Librarian" href="#the-librarian">
+      <n-anchor-link title="The Colonel" href="#the-colonel"/>
+      <n-anchor-link title="The Caretaker" href="#the-caretaker"/> 
+    </n-anchor-link>
+  </n-anchor>
+</div>
+<div style="padding-left: 400px;">
+  <n-button @click="scrollTo('#the-librarian')">Librarian</n-button>
+  <n-button @click="scrollTo('#the-caretaker')">Caretaker</n-button>
+</div>
+```
+```js
+export default {
+  methods: {
+    scrollTo (href) {
+      this.$refs.anchor.scrollTo(href)
+    }
+  }
+}
+```
+```css
+.n-button {
+  margin: 0 8px 12px 0;
+}
+```
--- a/demo/documentation/components/anchor/enUS/theCaretaker.md
+++ b/demo/documentation/components/anchor/enUS/theCaretaker.md
@ -1,4 +1,3 @@
 # The Caretaker
 ```html
-<n-tag id="the-caretaker">The Caretaker</n-tag>
 ```
--- a/demo/documentation/components/anchor/enUS/theColonel.md
+++ b/demo/documentation/components/anchor/enUS/theColonel.md
@ -1,4 +1,3 @@
 # The Colonel
 ```html
-<n-tag id="the-colonel">The Colonel</n-tag>
 ```
--- a/demo/documentation/components/anchor/enUS/theGatekeeper.md
+++ b/demo/documentation/components/anchor/enUS/theGatekeeper.md
@ -1,4 +1,3 @@
 # The Gatekeeper
 ```html
-<n-tag id="the-gatekeeper">The Gatekeeper</n-tag>
 ```
--- a/demo/documentation/components/anchor/enUS/theLibrarian.md
+++ b/demo/documentation/components/anchor/enUS/theLibrarian.md
@ -1,4 +1,3 @@
 # The Librarian
 ```html
-<n-tag id="the-librarian">The Librarian</n-tag>
 ```
--- a/demo/documentation/components/anchor/enUS/theNarrator.md
+++ b/demo/documentation/components/anchor/enUS/theNarrator.md
@ -1,4 +1,3 @@
 # The Narrator
 ```html
-<n-tag id="the-narrator">The Narrator</n-tag>
 ```
--- a/demo/documentation/components/anchor/enUS/theNarratorSShadow.md
+++ b/demo/documentation/components/anchor/enUS/theNarratorSShadow.md
@ -1,4 +1,3 @@
 # The Narrators's Shadow
 ```html
-<n-tag id="the-narrator-s-shadow">The Narrators's Shadow</n-tag>
 ```
--- a/demo/documentation/components/app/enUS/index.md
+++ b/demo/documentation/components/app/enUS/index.md
@ -1,8 +0,0 @@
-# App
-App is using to set global theme and set namespace for components (detached parts).
-## Demos
-```demo
-theme
-namespace
-inherit-theme
-```
--- a/demo/documentation/components/autoComplete/enUS/afterSelect.md
+++ b/demo/documentation/components/autoComplete/enUS/afterSelect.md
@ -0,0 +1,45 @@
+# Actions After Select
+```html
+<n-auto-complete
+  :options="options"
+  v-model="value"
+  clear-after-select
+  placeholder="Clear After Select"
+/>
+<n-auto-complete
+  :options="options"
+  v-model="value"
+  blur-after-select
+  placeholder="Blur After Select"
+/>
+```
+```js
+export default {
+  computed: {
+    options () {
+      return [
+        '@gmail.com',
+        '@163.com',
+        '@qq.com'
+      ].map(suffix => {
+        const value = this.value === null ? '' : this.value
+        const prefix = value.split('@')[0]
+        return {
+          label: prefix + suffix,
+          value: prefix + suffix,
+        }
+      })
+    }
+  },
+  data () {
+    return {
+      value: null
+    }
+  }
+}
+```
+```css
+.n-auto-complete {
+  margin: 0 0 12px 0;
+}
+```
--- a/demo/documentation/components/autoComplete/enUS/basic.md
+++ b/demo/documentation/components/autoComplete/enUS/basic.md
@ -0,0 +1,28 @@
+# Basic
+```html
+<n-auto-complete :options="options" v-model="value" placeholder="Email" />
+```
+```js
+export default {
+  computed: {
+    options () {
+      return [
+        '@gmail.com',
+        '@163.com',
+        '@qq.com'
+      ].map(suffix => {
+        const prefix = this.value.split('@')[0]
+        return {
+          label: prefix + suffix,
+          value: prefix + suffix,
+        }
+      })
+    }
+  },
+  data () {
+    return {
+      value: ''
+    }
+  }
+}
+```
--- a/demo/documentation/components/autoComplete/enUS/customInput.md
+++ b/demo/documentation/components/autoComplete/enUS/customInput.md
@ -0,0 +1,39 @@
+# Custom Input Element
+```html
+<n-auto-complete :options="options" v-model="value">
+  <template v-slot:activator="{ handleInput, handleBlur, handleFocus, value }">
+    <n-input
+      type="textarea"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      :value="value"
+      placeholder="Email"
+    />
+  </template>
+</n-auto-complete>
+```
+```js
+export default {
+  computed: {
+    options () {
+      return [
+        '@gmail.com',
+        '@163.com',
+        '@qq.com'
+      ].map(suffix => {
+        const prefix = this.value.split('@')[0]
+        return {
+          label: prefix + suffix,
+          value: prefix + suffix,
+        }
+      })
+    }
+  },
+  data () {
+    return {
+      value: ''
+    }
+  }
+}
+```
--- a/demo/documentation/components/autoComplete/enUS/index.md
+++ b/demo/documentation/components/autoComplete/enUS/index.md
@ -0,0 +1,6 @@
+# Auto Complete
+```demo
+basic
+custom-input
+after-select
+```
--- a/demo/documentation/components/advancedTable/index.entry
+++ b/demo/documentation/components/advancedTable/index.entry
--- a/demo/documentation/components/advancedTable/zhCN/index.md
+++ b/demo/documentation/components/advancedTable/zhCN/index.md
--- a/demo/documentation/components/avatar/enUS/badge.md
+++ b/demo/documentation/components/avatar/enUS/badge.md
@ -0,0 +1,7 @@
+# Badge
+
+```html
+<n-badge value="666">
+  <n-avatar>666</n-avatar>
+</n-badge>
+```
--- a/demo/documentation/components/avatar/enUS/color.md
+++ b/demo/documentation/components/avatar/enUS/color.md
@ -0,0 +1,14 @@
+# Color
+
+```html
+<n-avatar :themed-style="{
+  light: {
+    color: 'yellow',
+    backgroundColor: 'red'
+  },
+  dark: {
+     color: 'red',
+    backgroundColor: 'yellow'
+  }
+}">Liu<br>Dehua</n-avatar>
+```
--- a/demo/documentation/components/avatar/enUS/icon.md
+++ b/demo/documentation/components/avatar/enUS/icon.md
@ -0,0 +1,21 @@
+# Icon
+```html
+<n-avatar>
+  <n-icon>
+    <md-cash />
+  </n-icon>
+</n-avatar>
+```
+```js
+import mdCash from 'naive-ui/lib/icons/md-cash'
+import mdContacts from 'naive-ui/lib/icons/md-contacts'
+import iosContacts from 'naive-ui/lib/icons/ios-contacts'
+
+export default {
+  components: {
+    mdCash,
+    mdContacts,
+    iosContacts
+  }
+}
+```
--- a/demo/documentation/components/avatar/enUS/index.md
+++ b/demo/documentation/components/avatar/enUS/index.md
@ -0,0 +1,9 @@
+# Avatar
+```demo
+size
+shape
+color
+badge
+icon
+name-size
+```
--- a/demo/documentation/components/avatar/enUS/nameSize.md
+++ b/demo/documentation/components/avatar/enUS/nameSize.md
@ -0,0 +1,16 @@
+# Name Size
+```html
+<n-avatar>{{ value }}</n-avatar>
+<n-avatar circle>{{ value }}</n-avatar>
+<n-avatar circle>Liu<br>{{ value }}</n-avatar>
+<n-input v-model="value"/>
+```
+```js
+export default {
+  data () {
+    return {
+      value: 'Dehua'
+    }
+  }
+}
+```
--- a/demo/documentation/components/avatar/enUS/shape.md
+++ b/demo/documentation/components/avatar/enUS/shape.md
@ -0,0 +1,10 @@
+# Shape
+
+Avatar can be circle shaped.
+
+```html
+<n-avatar circle size="small" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
+<n-avatar circle size="medium" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
+<n-avatar circle size="large" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
+<n-avatar circle :size="48" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
+```
--- a/demo/documentation/components/avatar/enUS/size.md
+++ b/demo/documentation/components/avatar/enUS/size.md
@ -0,0 +1,10 @@
+# Size
+
+Avatar has `small`, `medium` and `large` size.
+
+```html
+<n-avatar size="small" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
+<n-avatar size="medium" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
+<n-avatar size="large" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
+<n-avatar :size="48" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
+```
--- a/demo/documentation/components/avatar/index.entry
+++ b/demo/documentation/components/avatar/index.entry
--- a/demo/documentation/components/avatar/zhCN/badge.md
+++ b/demo/documentation/components/avatar/zhCN/badge.md
@ -0,0 +1,7 @@
+# 徽标 
+
+```html
+<n-badge value="666">
+  <n-avatar>666</n-avatar>
+</n-badge>
+```
--- a/demo/documentation/components/avatar/zhCN/color.md
+++ b/demo/documentation/components/avatar/zhCN/color.md
@ -0,0 +1,14 @@
+# 颜色
+
+```html
+<n-avatar :themed-style="{
+  light: {
+    color: 'yellow',
+    backgroundColor: 'red'
+  },
+  dark: {
+     color: 'red',
+    backgroundColor: 'yellow'
+  }
+}">刘<br>德华</n-avatar>
+```
--- a/demo/documentation/components/avatar/zhCN/icon.md
+++ b/demo/documentation/components/avatar/zhCN/icon.md
@ -0,0 +1,21 @@
+# 图标
+```html
+<n-avatar>
+  <n-icon>
+    <md-cash />
+  </n-icon>
+</n-avatar>
+```
+```js
+import mdCash from 'naive-ui/lib/icons/md-cash'
+import mdContacts from 'naive-ui/lib/icons/md-contacts'
+import iosContacts from 'naive-ui/lib/icons/ios-contacts'
+
+export default {
+  components: {
+    mdCash,
+    mdContacts,
+    iosContacts
+  }
+}
+```
--- a/demo/documentation/components/avatar/zhCN/index.md
+++ b/demo/documentation/components/avatar/zhCN/index.md
@ -0,0 +1,9 @@
+# 头像
+```demo
+size
+shape
+color
+badge
+icon
+name-size
+```
--- a/demo/documentation/components/avatar/zhCN/nameSize.md
+++ b/demo/documentation/components/avatar/zhCN/nameSize.md
@ -0,0 +1,16 @@
+# 字号
+```html
+<n-avatar>{{ value }}</n-avatar>
+<n-avatar circle>{{ value }}</n-avatar>
+<n-avatar circle>刘<br>{{ value }}</n-avatar>
+<n-input v-model="value"/>
+```
+```js
+export default {
+  data () {
+    return {
+      value: '德华'
+    }
+  }
+}
+```
--- a/demo/documentation/components/avatar/zhCN/shape.md
+++ b/demo/documentation/components/avatar/zhCN/shape.md
@ -0,0 +1,10 @@
+# 形状
+
+头像可以是圆形。
+
+```html
+<n-avatar circle size="small" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
+<n-avatar circle size="medium" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
+<n-avatar circle size="large" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
+<n-avatar circle :size="48" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
+```
--- a/demo/documentation/components/avatar/zhCN/size.md
+++ b/demo/documentation/components/avatar/zhCN/size.md
@ -0,0 +1,10 @@
+# 尺寸
+
+头像有 `small`、`medium` 和 `large` 尺寸。
+
+```html
+<n-avatar size="small" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
+<n-avatar size="medium" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
+<n-avatar size="large" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
+<n-avatar :size="48" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
+```
--- a/demo/documentation/components/backTop/enUS/basic.md
+++ b/demo/documentation/components/backTop/enUS/basic.md
@ -1,4 +1,5 @@
 # Basic
+BackTop will find its first scrollable ascendant element and listen scroll event on it.
 ```html
 <n-back-top />
 ```
--- a/demo/documentation/components/backTop/enUS/changePosition.md
+++ b/demo/documentation/components/backTop/enUS/changePosition.md
@ -2,11 +2,24 @@
 ```html
 <n-back-top
  :right="40"
-  :bottom="100"
+  :bottom="160"
  :visibility-height="200"
+  :style="{
+    transition: 'all .3s cubic-bezier(.4, 0, .2, 1)'
+  }"
+  :themed-style="{
+    light: {
+      color: 'rgb(0, 0, 0)',
+      backgroundColor: 'rgba(0, 0, 0, .3)'
+    },
+    dark: {
+      color: 'rgb(255, 255, 255)',
+      backgroundColor: 'rgba(255, 255, 255, .3)'
+    }
+  }"
 >
-  <div style="width: 40px; height: 40px; line-height: 40px; text-align: center;">
-    3
+  <div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
+    Change Position
  </div>
 </n-back-top>
 ```
--- a/demo/documentation/components/backTop/enUS/targetContainerSelector.md
+++ b/demo/documentation/components/backTop/enUS/targetContainerSelector.md
@ -1,26 +1,36 @@
 # Target
+You can specify target to listen scroll event of.
 ```html
 <n-back-top
  :target="target"
-  :right="160"
+  :bottom="220"
  :visibility-height="10"
+  :style="{
+    transition: 'all .3s cubic-bezier(.4, 0, .2, 1)'
+  }"
+  :themed-style="{
+    light: {
+      color: 'rgb(0, 0, 0)',
+      backgroundColor: 'rgba(0, 0, 0, .3)'
+    },
+    dark: {
+      color: 'rgb(255, 255, 255)',
+      backgroundColor: 'rgba(255, 255, 255, .3)'
+    }
+  }"
 >
-  <div style="width: 40px; height: 40px; line-height: 40px; text-align: center;">
-    2.2
+   <div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
+    Specify Target
  </div>
 </n-back-top>
-<div ref="scrollContainer" style="overflow: auto; height: 64px;">
-  6<br>
-  6<br>
-  6<br>
-  6<br>
-  6<br>
-  6<br>
-  6<br>
-  6<br>
-  6<br>
-  6<br>
-  6<br>
+<div ref="scrollContainer" style="overflow: auto; height: 72px; line-height: 1.5;">
+  A funny joke is need to be wrote here.<br/>
+  A funny joke is need to be wrote here.<br/>
+  A funny joke is need to be wrote here.<br/>
+  A funny joke is need to be wrote here.<br/>
+  A funny joke is need to be wrote here.<br/>
+  A funny joke is need to be wrote here.<br/>
+  A funny joke is need to be wrote here.<br/>
 </div>
 ```
 ```js
--- a/demo/documentation/components/backTop/enUS/visibilityHeight.md
+++ b/demo/documentation/components/backTop/enUS/visibilityHeight.md
@ -1,12 +1,25 @@
 # Visibility Height
+You can change visibility height of backtop.
 ```html
 <n-back-top
-  :right="100"
  :bottom="100"
  :visibility-height="600"
+  :style="{
+    transition: 'all .3s cubic-bezier(.4, 0, .2, 1)'
+  }"
+  :themed-style="{
+    light: {
+      color: 'rgb(0, 0, 0)',
+      backgroundColor: 'rgba(0, 0, 0, .3)'
+    },
+    dark: {
+      color: 'rgb(255, 255, 255)',
+      backgroundColor: 'rgba(255, 255, 255, .3)'
+    }
+  }"
 >
-  <div style="width: 40px; height: 40px; line-height: 40px; text-align: center;">
-    4
+  <div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
+    Visibility Height: 600px
  </div>
 </n-back-top>
 ```
--- a/demo/documentation/components/badge/enUS/index.md
+++ b/demo/documentation/components/badge/enUS/index.md
@ -7,4 +7,5 @@ show-zero
 overflow
 manual
 custom-content
+raw
 ```
--- a/demo/documentation/components/badge/enUS/raw.md
+++ b/demo/documentation/components/badge/enUS/raw.md
@ -0,0 +1,48 @@
+# Raw
+```html
+<n-badge :value="value" :max="15" />
+<n-badge :value="value" dot/>
+<n-button-group>
+  <n-button @click="value = Math.min(16, value + 1)">
+    <template v-slot:icon>
+      <n-icon><md-add /></n-icon>
+    </template>
+  </n-button>
+  <n-button @click="value = Math.max(0, value - 1)">
+    <template v-slot:icon>
+      <n-icon><md-remove /></n-icon>
+    </template>
+  </n-button>
+</n-button-group>
+```
+```js
+import mdAdd from 'naive-ui/lib/icons/md-add'
+import mdRemove from 'naive-ui/lib/icons/md-remove'
+
+export default {
+  components: {
+    mdAdd,
+    mdRemove
+  },
+  data() {
+    return {
+      value: 5
+    };
+  }
+};
+```
+```css
+.n-badge {
+  margin: 0 32px 0 0;
+}
+.block {
+  width: 32px;
+  height: 32px;
+  background-color: #dddddd;
+  border-radius: 4px;
+  transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
+}
+.n-dark-theme .block {
+  background-color: rgba(255, 255, 255, .15);
+}
+```
--- a/demo/documentation/components/button/enUS/basic.md
+++ b/demo/documentation/components/button/enUS/basic.md
@ -1,5 +1,5 @@
 # Basic
-There are `default`, `primary`, `info`, `success`, `warning` and `error` type of button
+There are `default`, `primary`, `info`, `success`, `warning` and `error` type of button.
 ```html
 <n-button>Default</n-button>
 <n-button type="primary">Primary</n-button>
@ -12,4 +12,4 @@ There are `default`, `primary`, `info`, `success`, `warning` and `error` type of
 .n-button {
  margin: 0 8px 8px 0;
 }
-```
+```
--- a/demo/documentation/components/button/enUS/disabled.md
+++ b/demo/documentation/components/button/enUS/disabled.md
@ -1,5 +1,5 @@
 # Disabled
-Button can be disabled
+Button can be disabled.
 ```html
 <n-button
  size="small"
@ -42,4 +42,4 @@ export default {
 .n-button {
  margin: 0 8px 8px 0;
 }
-```
+```
--- a/demo/documentation/components/button/enUS/events.md
+++ b/demo/documentation/components/button/enUS/events.md
@ -1,5 +1,5 @@
 # Events
-Listening events on button.
+Handle events on button.
 ```html
 <n-button @click="handleClick">
  Click Me
--- a/demo/documentation/components/button/enUS/icon.md
+++ b/demo/documentation/components/button/enUS/icon.md
@ -1,5 +1,5 @@
 # Icon
-Using icon in button
+Use icon in button.
 ```html
 <n-button>
  <template v-slot:icon>
@ -27,4 +27,4 @@ export default {
 .n-button {
  margin: 0 8px 8px 0;
 }
-```
+```
--- a/demo/documentation/components/button/enUS/index.md
+++ b/demo/documentation/components/button/enUS/index.md
@ -3,6 +3,7 @@ Button is used to trigger some actions.
 ## Demos
 ```demo
 basic
+text
 disabled
 icon
 events
--- a/demo/documentation/components/button/enUS/text.md
+++ b/demo/documentation/components/button/enUS/text.md
@ -0,0 +1,14 @@
+# Text Button
+```html
+<n-button text>Default</n-button>
+<n-button text type="primary">Primary</n-button>
+<n-button text type="info">Info</n-button>
+<n-button text type="success">Success</n-button>
+<n-button text type="warning">Warning</n-button>
+<n-button text type="error">Error</n-button>
+```
+```css
+.n-button {
+  margin: 0 8px 8px 0;
+}
+```
--- a/demo/documentation/components/button/zhCN/debug.md
+++ b/demo/documentation/components/button/zhCN/debug.md
@ -7,354 +7,455 @@
 >
  <n-button
    type="default"
-    icon="md-save"
    round
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Default
  </n-button>
  <n-button
    type="primary"
-    icon="md-save"
    disabled
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Primary
  </n-button>
  <n-button
    type="info"
-    icon="md-save"
    icon-position="right"
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Info
  </n-button>
  <n-button
    type="warning"
-    icon="md-save"
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Warning
  </n-button>
  <n-button
    type="success"
-    icon="md-save"
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Success
  </n-button>
  <n-button
    type="error"
-    icon="md-save"
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Error
  </n-button>
  <n-button
    type="default"
-    icon="md-save"
    ghost
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Default
  </n-button>
  <n-button
    type="primary"
-    icon="md-save"
    ghost
    round
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Primary
  </n-button>
  <n-button
    type="info"
-    icon="md-save"
    ghost
    disabled
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Info
  </n-button>
  <n-button
    type="warning"
-    icon="md-save"
    ghost
    icon-position="right"
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Warning
  </n-button>
  <n-button
    type="success"
-    icon="md-save"
    ghost
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Success
  </n-button>
  <n-button
    type="error"
-    icon="md-save"
    ghost
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Error
  </n-button>
  <n-button
    type="default"
-    icon="md-save"
    loading
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Default
  </n-button>
  <n-button
    type="primary"
-    icon="md-save"
    loading
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Primary
  </n-button>
  <n-button
    type="info"
-    icon="md-save"
    loading
    round
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Info
  </n-button>
  <n-button
    type="warning"
-    icon="md-save"
    loading
    disabled
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Warning
  </n-button>
  <n-button
    type="success"
-    icon="md-save"
    loading
    icon-position="right"
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Success
  </n-button>
  <n-button
    type="error"
-    icon="md-save"
    loading
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Error
  </n-button>
  <n-button
    type="default"
-    icon="md-save"
    ghost
    loading
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Default
  </n-button>
  <n-button
    type="primary"
-    icon="md-save"
    ghost
    loading
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Primary
  </n-button>
  <n-button
    type="info"
-    icon="md-save"
    ghost
    loading
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Info
  </n-button>
  <n-button
    type="warning"
-    icon="md-save"
    ghost
    loading
    round
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Warning
  </n-button>
  <n-button
    type="success"
-    icon="md-save"
    ghost
    loading
    disabled
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Success
  </n-button>
  <n-button
    type="error"
-    icon="md-save"
    ghost
    loading
    icon-position="right"
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Error
  </n-button>
  <n-button
    type="default"
-    icon="md-save"
    round
    block
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Default
  </n-button>
  <n-button
    type="primary"
-    icon="md-save"
    disabled
    block
    size="small"
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Primary
  </n-button>
  <n-button
    type="info"
-    icon="md-save"
    icon-position="right"
    block
    size="large"
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Info
  </n-button>
  <n-button
    type="warning"
-    icon="md-save"
    block
    ghost
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Warning
  </n-button>
  <n-button
    type="success"
-    icon="md-save"
    block
    loading
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Success
  </n-button>
  <n-button
    type="error"
-    icon="md-save"
    block
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Error
  </n-button>
  <n-button
    type="primary"
-    icon="md-save"
    disabled
    circle
    size="small"
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Primary
  </n-button>
  <n-button
    type="info"
-    icon="md-save"
    icon-position="right"
    circle
    size="large"
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Info
  </n-button>
  <n-button
    type="warning"
-    icon="md-save"
    circle
    ghost
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Warning
  </n-button>
  <n-button
    type="success"
-    icon="md-save"
    circle
    loading
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Success
  </n-button>
  <n-button
    type="error"
-    icon="md-save"
    circle
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Error
  </n-button>
  <n-button
    type="error"
-    icon="md-save"
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Error
  </n-button>
  <n-button
    type="error"
-    icon="md-save"
    size="large"
-  />
+  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
+  </n-button>
  <n-button
    type="error"
    round
-    icon="md-save"
    size="large"
-  />
+  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
+  </n-button>
  <n-button-group>
    <n-button
      type="default"
-      icon="md-save"
      round
    >
+      <template v-slot:icon>
+        <md-save />
+      </template>
      Default
    </n-button>
    <n-button
      type="primary"
-      icon="md-save"
      disabled
    >
+      <template v-slot:icon>
+        <md-save />
+      </template>
      Primary
    </n-button>
    <n-button
      type="info"
-      icon="md-save"
      icon-position="right"
    >
+      <template v-slot:icon>
+        <md-save />
+      </template>
      Info
    </n-button>
    <n-button
      type="warning"
-      icon="md-save"
    >
+      <template v-slot:icon>
+        <md-save />
+      </template>
      Warning
    </n-button>
  </n-button-group>
  <n-button-group vertical>
    <n-button
      type="default"
-      icon="md-save"
      round
    >
+      <template v-slot:icon>
+        <md-save />
+      </template>
      Default
    </n-button>
    <n-button
      type="primary"
-      icon="md-save"
      disabled
    >
+      <template v-slot:icon>
+        <md-save />
+      </template>
      Primary
    </n-button>
    <n-button
      type="info"
-      icon="md-save"
      icon-position="right"
    >
+      <template v-slot:icon>
+        <md-save />
+      </template>
      Info
    </n-button>
    <n-button
      type="warning"
-      icon="md-save"
    >
+      <template v-slot:icon>
+        <md-save />
+      </template>
      Warning
    </n-button>
  </n-button-group>
 </div>
 ```
 ```js
-export default {
+import mdSave from 'naive-ui/lib/icons/md-save'

+export default {
+  components: {
+    mdSave
+  },
+  mounted () {
+    console.log(this)
+  }
 }
 ```
 ```css
--- a/demo/documentation/components/button/zhCN/disabled.md
+++ b/demo/documentation/components/button/zhCN/disabled.md
@ -1,5 +1,5 @@
 # 禁用
-按钮可以被禁用
+按钮可以被禁用。
 ```html
 <n-button
  size="small"
@ -30,4 +30,4 @@
 .n-button {
  margin: 0 8px 8px 0;
 }
-```
+```
--- a/demo/documentation/components/button/zhCN/ghost.md
+++ b/demo/documentation/components/button/zhCN/ghost.md
@ -4,10 +4,23 @@
 <n-button ghost>Default</n-button>
 <n-button round type="primary" ghost>Primary</n-button>
 <n-button type="info" ghost>Info</n-button>
-<n-button circle type="success" icon="md-save" ghost />
+<n-button circle type="success" ghost >
+  <template v-slot:icon>
+    <md-save />
+  </template>
+</n-button>
 <n-button type="warning" ghost>Warning</n-button>
 <n-button type="error" ghost disabled>Error</n-button>
 ```
+```js
+import mdSave from 'naive-ui/lib/icons/md-save'
+
+export default {
+  components: {
+    mdSave
+  }
+}
+```
 ```css
 .n-button {
  margin: 0 8px 8px 0;
--- a/demo/documentation/components/button/zhCN/group.md
+++ b/demo/documentation/components/button/zhCN/group.md
@ -4,62 +4,87 @@
 <n-button-group>
  <n-button
    type="default"
-    icon="md-save"
    round
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Default
  </n-button>
  <n-button
    type="primary"
-    icon="md-save"
    disabled
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Primary
  </n-button>
  <n-button
    type="info"
-    icon="md-save"
    icon-position="right"
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Info
  </n-button>
  <n-button
    type="warning"
-    icon="md-save"
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Warning
  </n-button>
 </n-button-group>
 <n-button-group vertical>
  <n-button
    type="default"
-    icon="md-save"
    round
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Default
  </n-button>
  <n-button
    type="primary"
-    icon="md-save"
    disabled
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Primary
  </n-button>
  <n-button
    type="info"
-    icon="md-save"
    icon-position="right"
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Info
  </n-button>
  <n-button
    type="warning"
-    icon="md-save"
  >
+    <template v-slot:icon>
+      <md-save />
+    </template>
    Warning
  </n-button>
 </n-button-group>
 ```
+```js
+import mdSave from 'naive-ui/lib/icons/md-save'
+
+export default {
+  components: {
+    mdSave
+  }
+}
+```
 ```css
 .n-button {
  margin: 0 8px 8px 0;
--- a/demo/documentation/components/button/zhCN/icon.md
+++ b/demo/documentation/components/button/zhCN/icon.md
@ -1,11 +1,30 @@
 # 图标
-在按钮上使用图标
+在按钮上使用图标。
 ```html
-<n-button icon="md-save">Save</n-button>
-<n-button icon="md-save" icon-position="right">Save</n-button>
+<n-button>
+  <template v-slot:icon>
+    <md-save />
+  </template>
+  Save
+</n-button>
+<n-button icon-position="right">
+  <template v-slot:icon>
+    <md-save />
+  </template>
+  Save
+</n-button>
+```
+```js
+import mdSave from 'naive-ui/lib/icons/md-save'
+
+export default {
+  components: {
+    mdSave
+  }
+}
 ```
 ```css
 .n-button {
  margin: 0 8px 8px 0;
 }
-```
+```
--- a/demo/documentation/components/button/zhCN/index.md
+++ b/demo/documentation/components/button/zhCN/index.md
@ -1,5 +1,5 @@
 # 按钮
-按钮用来触发一些操作
+按钮用来触发一些操作。
 ## 演示
 ```demo
 basic
@ -15,4 +15,4 @@ debug
 ## API
 |属性|说明|类型|默认值|版本|
 |-|-|-|-|-|
-|type|按钮类型|string|`'default'`||
+|type|按钮类型|string|`'default'`||
--- a/demo/documentation/components/button/zhCN/loading.md
+++ b/demo/documentation/components/button/zhCN/loading.md
@ -1,19 +1,23 @@
 # 加载中
-按钮有加载状态
+按钮有加载状态。
 ```html
 <n-button
-  icon="md-save"
  :loading="loading"
  @click="loading = !loading"
 >
+  <template v-slot:icon>
+    <md-save />
+  </template>
  Loading
 </n-button>
 <n-button
-  icon="md-save"
  :loading="loading"
  icon-position="right"
  @click="loading = !loading"
 >
+  <template v-slot:icon>
+    <md-save />
+  </template>
  Loading
 </n-button>
 <n-button
@ -42,7 +46,12 @@
 ```

 ```js
+import mdSave from 'naive-ui/lib/icons/md-save'
+
 export default {
+  components: {
+    mdSave
+  },
  data () {
    return {
      loading: false
--- a/demo/documentation/components/button/zhCN/shape.md
+++ b/demo/documentation/components/button/zhCN/shape.md
@ -1,5 +1,5 @@
 # 形状
-按钮拥有不同的形状
+按钮拥有不同的形状。
 ```html
 <n-button circle icon="md-save" />
 <n-button type="primary" round>Primary</n-button>
@ -9,4 +9,4 @@
 .n-button {
  margin: 0 8px 8px 0;
 }
-```
+```
--- a/demo/documentation/components/card/enUS/basic.md
+++ b/demo/documentation/components/card/enUS/basic.md
@ -0,0 +1,12 @@
+# Basic
+Basic Card
+```html
+<n-card title="Card">
+  Card Content
+</n-card>
+```
+```css
+.n-card {
+  max-width: 300px;
+}
+```
--- a/demo/documentation/components/card/enUS/border.md
+++ b/demo/documentation/components/card/enUS/border.md
@ -0,0 +1,7 @@
+# Border
+Card can be used without border.
+```html
+<n-card :bordered="false" title="Borderless Card">
+  Card Content
+</n-card>
+```
--- a/demo/documentation/components/card/enUS/closable.md
+++ b/demo/documentation/components/card/enUS/closable.md
@ -0,0 +1,20 @@
+# Closable
+```html
+<n-card title="Card" closable @close="handleClose">
+  Card Content
+</n-card>
+```
+```js
+export default {
+  methods: {
+    handleClose () {
+      this.$NMessage.info('Card Close')
+    }
+  }
+}
+```
+```css
+.n-card {
+  max-width: 300px;
+}
+```
--- a/demo/documentation/components/card/enUS/cover.md
+++ b/demo/documentation/components/card/enUS/cover.md
@ -0,0 +1,15 @@
+# Cover
+Card can have a cover.
+```html
+<n-card title="Card with Cover">
+  <template v-slot:cover>
+    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg">
+  </template>
+  Card Content
+</n-card>
+```
+```css
+.n-card {
+  max-width: 300px;
+}
+```
--- a/demo/documentation/components/card/enUS/index.md
+++ b/demo/documentation/components/card/enUS/index.md
@ -0,0 +1,10 @@
+# Card
+```demo
+basic
+size
+cover
+slots
+border
+segment
+closable
+```
--- a/demo/documentation/components/card/enUS/segment.md
+++ b/demo/documentation/components/card/enUS/segment.md
@ -0,0 +1,20 @@
+# Segmented
+`header`, `content`, `footer` and `action` can be `hard` or `soft` segmented.
+```html
+<n-card title="Card Segmented Demo" :segmented="{
+  header: 'soft',
+  content: 'hard',
+  footer: 'hard'
+}">
+  <template v-slot:header-extra>
+    v-slot:header-extra
+  </template>
+  Card Content
+  <template v-slot:footer>
+    v-slot:footer
+  </template>
+  <template v-slot:action>
+    v-slot:action
+  </template>
+</n-card>
+```
--- a/demo/documentation/components/card/enUS/size.md
+++ b/demo/documentation/components/card/enUS/size.md
@ -0,0 +1,21 @@
+# Size
+Card has `small`, `medium`, `large`, `huge` sizes.
+```html
+<n-card title="Small Card" size="small">
+  Card Content
+</n-card>
+<n-card title="Medium Card" size="medium">
+  Card Content
+</n-card>
+<n-card title="Large Card" size="large">
+  Card Content
+</n-card>
+<n-card title="Huge Card" size="huge">
+  Card Content
+</n-card>
+```
+```css
+.n-card {
+  margin-bottom: 12px;
+}
+```
--- a/demo/documentation/components/card/enUS/slots.md
+++ b/demo/documentation/components/card/enUS/slots.md
@ -0,0 +1,15 @@
+# Slots
+```html
+<n-card title="Card Slots Demo">
+  <template v-slot:header-extra>
+    v-slot:header-extra
+  </template>
+  Card Content
+  <template v-slot:footer>
+    v-slot:footer
+  </template>
+  <template v-slot:action>
+    v-slot:action
+  </template>
+</n-card>
+```
--- a/demo/documentation/components/nimbusIcon/index.entry
+++ b/demo/documentation/components/nimbusIcon/index.entry
--- a/demo/documentation/components/card/zhCN/basic.md
+++ b/demo/documentation/components/card/zhCN/basic.md
@ -0,0 +1,12 @@
+# 基础
+基础卡片
+```html
+<n-card title="卡片">
+  卡片内容
+</n-card>
+```
+```css
+.n-card {
+  max-width: 300px;
+}
+```
--- a/demo/documentation/components/card/zhCN/border.md
+++ b/demo/documentation/components/card/zhCN/border.md
@ -0,0 +1,7 @@
+# 边框
+卡片可以没有边框。
+```html
+<n-card :bordered="false" title="无边框的卡片">
+  卡片内容
+</n-card>
+```
--- a/demo/documentation/components/card/zhCN/closable.md
+++ b/demo/documentation/components/card/zhCN/closable.md
@ -0,0 +1,20 @@
+# 可关闭
+```html
+<n-card title="卡片" closable @close="handleClose">
+  卡片内容
+</n-card>
+```
+```js
+export default {
+  methods: {
+    handleClose () {
+      this.$NMessage.info('卡片关闭')
+    }
+  }
+}
+```
+```css
+.n-card {
+  max-width: 300px;
+}
+```
--- a/demo/documentation/components/card/zhCN/cover.md
+++ b/demo/documentation/components/card/zhCN/cover.md
@ -0,0 +1,15 @@
+# 封面
+卡片可以有封面。
+```html
+<n-card title="带封面的卡片">
+  <template v-slot:cover>
+    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg">
+  </template>
+  卡片内容
+</n-card>
+```
+```css
+.n-card {
+  max-width: 300px;
+}
+```
--- a/demo/documentation/components/card/zhCN/index.md
+++ b/demo/documentation/components/card/zhCN/index.md
@ -0,0 +1,10 @@
+# 卡片
+```demo
+basic
+size
+cover
+slots
+border
+segment
+closable
+```
--- a/demo/documentation/components/card/zhCN/segment.md
+++ b/demo/documentation/components/card/zhCN/segment.md
@ -0,0 +1,20 @@
+# 分段
+`header`、`content`、`footer` 和 `action` 可以被 `hard` 或 `soft` 分段。
+```html
+<n-card title="卡片分段示例" :segmented="{
+  header: 'soft',
+  content: 'hard',
+  footer: 'hard'
+}">
+  <template v-slot:header-extra>
+    v-slot:header-extra
+  </template>
+  卡片内容
+  <template v-slot:footer>
+    v-slot:footer
+  </template>
+  <template v-slot:action>
+    v-slot:action
+  </template>
+</n-card>
+```
--- a/demo/documentation/components/card/zhCN/size.md
+++ b/demo/documentation/components/card/zhCN/size.md
@ -0,0 +1,21 @@
+# 尺寸
+卡片有 `small`、`medium`、`large`、`huge` 尺寸。
+```html
+<n-card title="小卡片" size="small">
+  卡片内容
+</n-card>
+<n-card title="中卡片" size="medium">
+  卡片内容
+</n-card>
+<n-card title="大卡片" size="large">
+  卡片内容
+</n-card>
+<n-card title="超大卡片" size="huge">
+  卡片内容
+</n-card>
+```
+```css
+.n-card {
+  margin-bottom: 12px;
+}
+```
--- a/demo/documentation/components/card/zhCN/slots.md
+++ b/demo/documentation/components/card/zhCN/slots.md
@ -0,0 +1,15 @@
+# 插槽
+```html
+<n-card title="卡片插槽示例">
+  <template v-slot:header-extra>
+    v-slot:header-extra
+  </template>
+  卡片内容
+  <template v-slot:footer>
+    v-slot:footer
+  </template>
+  <template v-slot:action>
+    v-slot:action
+  </template>
+</n-card>
+```
--- a/demo/documentation/components/cascader/enUS/trigger.md
+++ b/demo/documentation/components/cascader/enUS/trigger.md
@ -1,4 +1,4 @@
-# Trigger (Leaf Only)
+# Trigger
 ```html
 <n-cascader
  v-model="value"
--- a/demo/documentation/components/code/enUS/basic.md
+++ b/demo/documentation/components/code/enUS/basic.md
@ -0,0 +1,32 @@
+# Basic
+```html
+<n-code :code="`
+function sleep (ms = 1000) {
+  return new Promise(res => setTimeout(res, ms))
+}
+`" language="javascript" />
+
+<n-code :code="`
+def say_hello():
+    print('Hello Naive UI')
+`" language="python" />
+
+<n-code :code="cppCode" language="cpp" />
+```
+```js
+export default {
+  data () {
+    return {
+      cppCode: `int main () {
+  std::cout << "Hello Naive UI";
+  return 0;
+}`
+    }
+  }
+}
+```
+```css
+.n-code {
+  margin-bottom: 16px;
+}
+```
--- a/demo/documentation/components/code/enUS/index.md
+++ b/demo/documentation/components/code/enUS/index.md
@ -0,0 +1,26 @@
+# Code
+
+## Prequisites
+
+<n-alert title="Note" type="warning">
+  Due to package size, Naive UI doesn't include highlight.js. If you want use Code, make sure you have set highlightjs before using it.
+</n-alert>
+
+The following code shows how to set hljs of Naive UI. Importing highlight.js on demand is recommonded, because it can significantly reduce bundle size of your app.
+
+```js
+import Vue from 'vue'
+import NaiveUI from 'naive-ui'
+import hljs from 'highlight.js/lib/highlight'
+import javascript from 'highlight.js/lib/languages/javascript'
+
+hljs.registerLanguage('cpp', cpp)
+Vue.use(NaiveUI)
+NaiveUI.setHljs(hljs)
+```
+
+## Demos
+
+```demo
+basic
+```
--- a/demo/documentation/components/app/zhCN/index.md
+++ b/demo/documentation/components/app/zhCN/index.md
--- a/demo/documentation/components/nimbusIcon/zhCN/index.md
+++ b/demo/documentation/components/nimbusIcon/zhCN/index.md
--- a/demo/documentation/components/collapse/enUS/basic.md
+++ b/demo/documentation/components/collapse/enUS/basic.md
@ -7,6 +7,9 @@
  <n-collapse-item title="right" name="2">
    <div>good</div>
  </n-collapse-item>
+  <n-collapse-item title="right" name="3">
+    <div>test</div>
+  </n-collapse-item>
 </n-collapse>
 ```
 ```js
--- a/demo/documentation/components/collapse/zhCN/accordion.md
+++ b/demo/documentation/components/collapse/zhCN/accordion.md
@ -0,0 +1,20 @@
+# 手风琴
+```html
+<n-collapse v-model="activeNames" accordion>
+  <n-collapse-item title="动态类型" name="1">
+    <div>Python</div>
+  </n-collapse-item>
+  <n-collapse-item title="静态类型" name="2">
+    <div>Java</div>
+  </n-collapse-item>
+</n-collapse>
+```
+```js
+export default {
+  data() {
+    return {
+      activeNames: []
+    }
+  }
+}
+```
--- a/demo/documentation/components/collapse/zhCN/basic.md
+++ b/demo/documentation/components/collapse/zhCN/basic.md
@ -0,0 +1,23 @@
+# 基础
+```html
+<n-collapse v-model="activeNames">
+  <n-collapse-item title="青铜" name="1">
+    <div>可以</div>
+  </n-collapse-item>
+  <n-collapse-item title="白银" name="2">
+    <div>很好</div>
+  </n-collapse-item>
+  <n-collapse-item title="黄金" name="3">
+    <div>真棒</div>
+  </n-collapse-item>
+</n-collapse>
+```
+```js
+export default {
+  data() {
+    return {
+      activeNames: []
+    }
+  }
+}
+```
--- a/demo/documentation/components/collapse/zhCN/index.md
+++ b/demo/documentation/components/collapse/zhCN/index.md
@ -0,0 +1,6 @@
+# 折叠面板
+```demo
+basic
+accordion
+nested
+```
--- a/demo/documentation/components/collapse/zhCN/nested.md
+++ b/demo/documentation/components/collapse/zhCN/nested.md
@ -0,0 +1,28 @@
+# 嵌套
+```html
+<n-collapse v-model="activeNames">
+  <n-collapse-item title="绿灯" name="1">
+    <n-collapse v-model="activeNames2">
+      <n-collapse-item title="常亮" name="1">
+        <div>通过</div>
+      </n-collapse-item>
+      <n-collapse-item title="闪烁" name="2">
+        <div>快速通过</div>
+      </n-collapse-item>
+    </n-collapse>
+  </n-collapse-item>
+  <n-collapse-item title="红灯" name="2">
+    <div>停</div>
+  </n-collapse-item>
+</n-collapse>
+```
+```js
+export default {
+  data() {
+    return {
+      activeNames: [],
+      activeNames2: []
+    }
+  }
+}
+```
--- a/demo/documentation/components/configConsumer/enUS/basic.md
+++ b/demo/documentation/components/configConsumer/enUS/basic.md
@ -0,0 +1,26 @@
+# Basic
+```html
+<n-config-consumer
+  @theme-change="handleThemeChange"
+  @namespace-change="handleNamespaceChange"
+>
+  <template v-slot="{ theme, namespace }">
+    <div>
+      <div>theme: {{ theme }}</div>
+      <div>namespace: {{ namespace }}</div>
+    </div>
+  </template>
+</n-config-consumer>
+```
+```js
+export default {
+  methods: {
+    handleThemeChange (value, oldValue) {
+      this.$NMessage.info('Theme Change: `' + value + '` theme')
+    },
+    handleNamespaceChange (value, oldValue) {
+      this.$NMessage.info('Namespace Change: `' + value + '` namespace')
+    }
+  }
+}
+```
--- a/Show More
+++ b/Show More