From c8e15966f7b55ecfa5d00de2164421e29729285e Mon Sep 17 00:00:00 2001
From: liumeo <liumeo@pku.edu.cn>
Date: Thu, 2 Jan 2020 22:40:12 +0800
Subject: [PATCH 1/3] grid-zhcn

---
 .../components/grid/zhCN/basic.md             | 27 ++++++++++++
 .../components/grid/zhCN/gutter.md            | 41 +++++++++++++++++++
 .../components/grid/zhCN/index.md             |  8 ++++
 .../components/grid/zhCN/offset.md            | 21 ++++++++++
 .../components/grid/zhCN/pushPull.md          | 27 ++++++++++++
 5 files changed, 124 insertions(+)
 create mode 100644 demo/documentation/components/grid/zhCN/basic.md
 create mode 100644 demo/documentation/components/grid/zhCN/gutter.md
 create mode 100644 demo/documentation/components/grid/zhCN/offset.md
 create mode 100644 demo/documentation/components/grid/zhCN/pushPull.md

diff --git a/demo/documentation/components/grid/zhCN/basic.md b/demo/documentation/components/grid/zhCN/basic.md
new file mode 100644
index 000000000..187c87d56
--- /dev/null
+++ b/demo/documentation/components/grid/zhCN/basic.md
@@ -0,0 +1,27 @@
+# 基础
+```html
+<n-row :gutter="12">
+  <n-col :span="6">
+    <div class="red"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="green"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="red"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="green"></div>
+  </n-col>
+</n-row>
+```
+```css
+.red {
+  height: 108px;
+  background-color: rgba(128, 0, 0, .5);
+}
+.green {
+  height: 108px;
+  background-color: rgba(0, 128, 0, .5);
+}
+```
diff --git a/demo/documentation/components/grid/zhCN/gutter.md b/demo/documentation/components/grid/zhCN/gutter.md
new file mode 100644
index 000000000..65d1d1817
--- /dev/null
+++ b/demo/documentation/components/grid/zhCN/gutter.md
@@ -0,0 +1,41 @@
+# 间隔
+```html
+<n-row :gutter="[12, 8]">
+  <n-col :span="6">
+    <div class="red"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="green"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="red"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="green"></div>
+  </n-col>
+</n-row>
+<n-row :gutter="[12, 8]">
+  <n-col :span="6">
+    <div class="red"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="green"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="red"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="green"></div>
+  </n-col>
+</n-row>
+```
+```css
+.red {
+  height: 108px;
+  background-color: rgba(128, 0, 0, .5);
+}
+.green {
+  height: 108px;
+  background-color: rgba(0, 128, 0, .5);
+}
+```
diff --git a/demo/documentation/components/grid/zhCN/index.md b/demo/documentation/components/grid/zhCN/index.md
index e69de29bb..144023946 100644
--- a/demo/documentation/components/grid/zhCN/index.md
+++ b/demo/documentation/components/grid/zhCN/index.md
@@ -0,0 +1,8 @@
+# 栅格
+<!--single-column-->
+```demo
+basic
+gutter
+offset
+push-pull
+```
diff --git a/demo/documentation/components/grid/zhCN/offset.md b/demo/documentation/components/grid/zhCN/offset.md
new file mode 100644
index 000000000..4b87b73de
--- /dev/null
+++ b/demo/documentation/components/grid/zhCN/offset.md
@@ -0,0 +1,21 @@
+# 偏移 
+```html
+<n-row :gutter="12">
+  <n-col :span="6" :offset="6">
+    <div class="red"></div>
+  </n-col>
+  <n-col :span="6" :offset="6">
+    <div class="green"></div>
+  </n-col>
+</n-row>
+```
+```css
+.red {
+  height: 108px;
+  background-color: rgba(128, 0, 0, .5);
+}
+.green {
+  height: 108px;
+  background-color: rgba(0, 128, 0, .5);
+}
+```
diff --git a/demo/documentation/components/grid/zhCN/pushPull.md b/demo/documentation/components/grid/zhCN/pushPull.md
new file mode 100644
index 000000000..dd7e79998
--- /dev/null
+++ b/demo/documentation/components/grid/zhCN/pushPull.md
@@ -0,0 +1,27 @@
+# 排序
+```html
+<n-row :gutter="12">
+  <n-col :span="6" :push="6">
+    <div class="red"></div>
+  </n-col>
+  <n-col :span="6" :pull="6">
+    <div class="green"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="red"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="green"></div>
+  </n-col>
+</n-row>
+```
+```css
+.red {
+  height: 108px;
+  background-color: rgba(128, 0, 0, .5);
+}
+.green {
+  height: 108px;
+  background-color: rgba(0, 128, 0, .5);
+}
+```

From fc7df13d9d0a1239cded2530bb40a7c2354e449f Mon Sep 17 00:00:00 2001
From: liumeo <liumeo@pku.edu.cn>
Date: Thu, 2 Jan 2020 23:21:10 +0800
Subject: [PATCH 2/3] layout-zhcn

---
 .../components/layout/enUS/scrollbar.md       |  4 +-
 .../components/layout/zhCN/absolute.md        | 27 ++++++++
 .../components/layout/zhCN/basic.md           | 57 +++++++++++++++
 .../components/layout/zhCN/border.md          | 19 +++++
 .../components/layout/zhCN/collapse.md        | 68 ++++++++++++++++++
 .../components/layout/zhCN/debug.md           | 37 ++++++++++
 .../components/layout/zhCN/index.md           | 12 ++++
 .../components/layout/zhCN/scrollbar.md       | 23 +++++++
 .../layout/zhCN/showSiderContent.md           | 65 +++++++++++++++++
 .../components/layout/zhCN/triggerButton.md   | 69 +++++++++++++++++++
 10 files changed, 379 insertions(+), 2 deletions(-)
 create mode 100644 demo/documentation/components/layout/zhCN/absolute.md
 create mode 100644 demo/documentation/components/layout/zhCN/basic.md
 create mode 100644 demo/documentation/components/layout/zhCN/border.md
 create mode 100644 demo/documentation/components/layout/zhCN/collapse.md
 create mode 100644 demo/documentation/components/layout/zhCN/debug.md
 create mode 100644 demo/documentation/components/layout/zhCN/scrollbar.md
 create mode 100644 demo/documentation/components/layout/zhCN/showSiderContent.md
 create mode 100644 demo/documentation/components/layout/zhCN/triggerButton.md

diff --git a/demo/documentation/components/layout/enUS/scrollbar.md b/demo/documentation/components/layout/enUS/scrollbar.md
index b1cfb232a..39dcef8a5 100644
--- a/demo/documentation/components/layout/enUS/scrollbar.md
+++ b/demo/documentation/components/layout/enUS/scrollbar.md
@@ -1,5 +1,5 @@
 # Use Built-in Scrollbar
-Sometimes you will find native scrollbar doesn't meet the style of naive-ui. You can use build-in scrollbar of naive-ui (on sider, layout or content).
+Sometimes you will find native scrollbar doesn't meet the style of naive-ui. You can use built-in scrollbar of naive-ui (on sider, layout or content).
 ```html
 <n-layout style="height: 480px;">
     <n-layout-header style="height: 64px;">
@@ -20,4 +20,4 @@ Sometimes you will find native scrollbar doesn't meet the style of naive-ui. You
       Cool Footer
     </n-layout-footer>
   </n-layout>
-```
\ No newline at end of file
+```
diff --git a/demo/documentation/components/layout/zhCN/absolute.md b/demo/documentation/components/layout/zhCN/absolute.md
new file mode 100644
index 000000000..2310d528c
--- /dev/null
+++ b/demo/documentation/components/layout/zhCN/absolute.md
@@ -0,0 +1,27 @@
+# 绝对
+所有布局组件可以使用绝对定位。可用于让内容在盒内滚动。
+
+<n-alert title="警告" type="warning">为保证侧边栏及其相邻布局正确显示，它们均需设置mode="absolute"。</n-alert>
+```html
+<div style="width: 100%; height: 240px; position: relative">
+  <n-layout mode="absolute">
+    <n-layout-header style="height: 64px;">
+      Cool Header
+    </n-layout-header>
+    <n-layout mode="absolute" style="top: 64px; bottom: 64px;">
+      <n-layout-sider mode="absolute">
+        Cool Sider
+      </n-layout-sider>
+      <n-layout mode="absolute">
+        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+      </n-layout>
+    </n-layout>
+    <n-layout-footer mode="absolute" style="height: 64px">
+      Cool Footer
+    </n-layout-footer>
+  </n-layout>
+</div>
+```
diff --git a/demo/documentation/components/layout/zhCN/basic.md b/demo/documentation/components/layout/zhCN/basic.md
new file mode 100644
index 000000000..2ffe8fa3f
--- /dev/null
+++ b/demo/documentation/components/layout/zhCN/basic.md
@@ -0,0 +1,57 @@
+# 基础
+```html
+<n-layout>
+  <n-layout-header>
+    Cool Header
+  </n-layout-header>
+  <n-layout-content>
+    Cool Content
+  </n-layout-content>
+  <n-layout-footer>
+    Cool Footer
+  </n-layout-footer>
+</n-layout>
+<br>
+<n-layout>
+  <n-layout-header>
+    Cool Header
+  </n-layout-header>
+  <n-layout>
+    <n-layout-sider>
+      Cool Sider
+    </n-layout-sider>
+    <n-layout-content>
+      Cool Content
+    </n-layout-content>
+  </n-layout>
+  <n-layout-footer>
+    Cool Footer
+  </n-layout-footer>
+</n-layout>
+<br>
+<n-layout>
+  <n-layout-sider>
+    Cool Sider
+  </n-layout-sider>
+  <n-layout>
+    <n-layout-header>
+      Cool Header
+    </n-layout-header>
+    <n-layout-content>
+      Cool Content
+    </n-layout-content>
+    <n-layout-footer>
+      Cool Footer
+    </n-layout-footer>
+  </n-layout>
+</n-layout>
+```
+```js
+export default {
+  data () {
+    return {
+      collapsed: false
+    }
+  }
+}
+```
diff --git a/demo/documentation/components/layout/zhCN/border.md b/demo/documentation/components/layout/zhCN/border.md
new file mode 100644
index 000000000..6fc16ba3e
--- /dev/null
+++ b/demo/documentation/components/layout/zhCN/border.md
@@ -0,0 +1,19 @@
+# 边框
+```html
+<n-layout>
+  <n-layout-sider bordered>
+    Cool Sider
+  </n-layout-sider>
+  <n-layout>
+    <n-layout-header bordered>
+      Cool Header
+    </n-layout-header>
+    <n-layout-content>
+      Cool Content
+    </n-layout-content>
+    <n-layout-footer bordered>
+      Cool Footer
+    </n-layout-footer>
+  </n-layout>
+</n-layout>
+```
diff --git a/demo/documentation/components/layout/zhCN/collapse.md b/demo/documentation/components/layout/zhCN/collapse.md
new file mode 100644
index 000000000..2b7be166d
--- /dev/null
+++ b/demo/documentation/components/layout/zhCN/collapse.md
@@ -0,0 +1,68 @@
+# 折叠侧边栏
+使用 `collapsed` 属性控制侧边栏状态。
+
+侧边栏有两种 `collapse-mode`：`width`、`transform`。`width` 会改变侧边栏的宽度，而 `transform` 只是将侧边栏移除布局。
+
+使用 `collapsed-width` 和 `width` 设置侧边栏的宽度。
+```html
+<n-switch v-model="collapsed" />
+<n-layout style="height: 240px;">
+  <n-layout-header style="height: 64px;">
+    Cool Header
+  </n-layout-header>
+  <n-layout>
+    <n-layout-sider
+      collapse-mode="width"
+      :collapsed-width="120"
+      :width="240"
+      :collapsed="collapsed"
+      show-toggle-button
+      @collapse="collapsed = true"
+      @expand="collapsed = false"
+    >
+      <p>Sider Sider Sider Sider Sider Sider</p>
+    </n-layout-sider>
+    <n-layout>
+      <n-layout-content>
+        <span>Content</span>
+      </n-layout-content>
+      <n-layout-footer>
+        <n-h1>Footer</n-h1>
+      </n-layout-footer>
+    </n-layout>
+  </n-layout>
+</n-layout>
+<n-layout style="height: 240px;">
+  <n-layout-header mode="absolute" style="height: 64px;">
+    Cool Header
+  </n-layout-header>
+  <n-layout mode="absolute" style="top: 64px;">
+    <n-layout-sider
+      mode="absolute"
+      collapse-mode="transform"
+      :collapsed-width="120"
+      :width="240"
+      :collapsed="collapsed"
+      show-toggle-button
+      @collapse="collapsed = true"
+      @expand="collapsed = false"
+    >
+      <n-h1>Sider</n-h1>
+    </n-layout-sider>
+    <n-layout 
+      mode="absolute"
+    >
+      <span>Content</span>
+    </n-layout>
+  </n-layout>
+</n-layout>
+```
+```js
+export default {
+  data () {
+    return {
+      collapsed: true
+    }
+  }
+}
+```
diff --git a/demo/documentation/components/layout/zhCN/debug.md b/demo/documentation/components/layout/zhCN/debug.md
new file mode 100644
index 000000000..06b8aaf1f
--- /dev/null
+++ b/demo/documentation/components/layout/zhCN/debug.md
@@ -0,0 +1,37 @@
+# Debug
+```html
+<n-switch v-model="collapsed" />
+<n-layout style="height: 480px;">
+  <n-layout-header mode="absolute" style="height: 64px;">
+    Cool Header
+  </n-layout-header>
+  <n-layout mode="absolute" style="top: 64px;">
+    <n-layout-sider
+      mode="absolute"
+      :collapsed="collapsed"
+      show-toggle-button
+      @collapse="collapsed = true"
+      @expand="collapsed = false"
+    >
+      <n-h1>Sider</n-h1>
+    </n-layout-sider>
+    <n-layout mode="absolute" :use-native-scrollbar="false">
+      <n-layout-content>
+        <span>Content</span>
+      </n-layout-content>
+      <n-layout-footer>
+        <n-h1>Footer</n-h1>
+      </n-layout-footer>
+    </n-layout>
+  </n-layout>
+</n-layout>
+```
+```js
+export default {
+  data () {
+    return {
+      collapsed: false
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/layout/zhCN/index.md b/demo/documentation/components/layout/zhCN/index.md
index e69de29bb..cad5a9235 100644
--- a/demo/documentation/components/layout/zhCN/index.md
+++ b/demo/documentation/components/layout/zhCN/index.md
@@ -0,0 +1,12 @@
+# 布局
+<!--single-column-->
+```demo
+basic
+border
+absolute
+scrollbar
+collapse
+trigger-button
+show-sider-content
+debug
+```
diff --git a/demo/documentation/components/layout/zhCN/scrollbar.md b/demo/documentation/components/layout/zhCN/scrollbar.md
new file mode 100644
index 000000000..4bd7e9222
--- /dev/null
+++ b/demo/documentation/components/layout/zhCN/scrollbar.md
@@ -0,0 +1,23 @@
+# 使用内置滚动条
+有时原生滚动条与naive-ui的样式不协调。可以（在侧边栏、布局或内容）使用naive-ui内置的滚动条。
+```html
+<n-layout style="height: 480px;">
+    <n-layout-header style="height: 64px;">
+      Cool Header
+    </n-layout-header>
+    <n-layout mode="absolute" style="top: 64px; bottom: 64px;">
+      <n-layout-sider mode="absolute" :use-native-scrollbar="false">
+        Cool Sider
+      </n-layout-sider>
+      <n-layout mode="absolute" :use-native-scrollbar="false">
+        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+      </n-layout>
+    </n-layout>
+    <n-layout-footer mode="absolute" style="height: 64px">
+      Cool Footer
+    </n-layout-footer>
+  </n-layout>
+```
diff --git a/demo/documentation/components/layout/zhCN/showSiderContent.md b/demo/documentation/components/layout/zhCN/showSiderContent.md
new file mode 100644
index 000000000..74c6ddefa
--- /dev/null
+++ b/demo/documentation/components/layout/zhCN/showSiderContent.md
@@ -0,0 +1,65 @@
+# 隐藏侧边栏内容
+```html
+<n-switch v-model="collapsed" />
+<n-layout style="height: 240px;">
+  <n-layout-header style="height: 64px;">
+    Cool Header
+  </n-layout-header>
+  <n-layout>
+    <n-layout-sider
+      collapse-mode="width"
+      :show-content="!collapsed"
+      :collapsed-width="120"
+      :width="240"
+      :collapsed="collapsed"
+      show-toggle-button
+      @collapse="collapsed = true"
+      @expand="collapsed = false"
+    >
+      <n-h1>Sider</n-h1>
+    </n-layout-sider>
+    <n-layout>
+      <n-layout-content>
+        <span>Content</span>
+      </n-layout-content>
+      <n-layout-footer>
+        <n-h1>Footer</n-h1>
+      </n-layout-footer>
+    </n-layout>
+  </n-layout>
+</n-layout>
+<n-layout style="height: 240px;">
+  <n-layout-header mode="absolute" style="height: 64px;">
+    Cool Header
+  </n-layout-header>
+  <n-layout mode="absolute" style="top: 64px;">
+    <n-layout-sider
+      mode="absolute"
+      collapse-mode="transform"
+      :show-content="!collapsed"
+      :collapsed-width="120"
+      :width="240"
+      :collapsed="collapsed"
+      show-toggle-button
+      @collapse="collapsed = true"
+      @expand="collapsed = false"
+    >
+      <n-h1>Sider</n-h1>
+    </n-layout-sider>
+    <n-layout 
+      mode="absolute"
+    >
+      <span>Content</span>
+    </n-layout>
+  </n-layout>
+</n-layout>
+```
+```js
+export default {
+  data () {
+    return {
+      collapsed: false
+    }
+  }
+}
+```
diff --git a/demo/documentation/components/layout/zhCN/triggerButton.md b/demo/documentation/components/layout/zhCN/triggerButton.md
new file mode 100644
index 000000000..d01323ce6
--- /dev/null
+++ b/demo/documentation/components/layout/zhCN/triggerButton.md
@@ -0,0 +1,69 @@
+# 触发按钮
+```html
+<n-switch v-model="collapsed" />
+<n-layout style="height: 240px;">
+  <n-layout-header style="height: 64px;">
+    Cool Header
+  </n-layout-header>
+  <n-layout>
+    <n-layout-sider
+      collapse-mode="width"
+      show-trigger
+      :collapsed-width="120"
+      :width="240"
+      :collapsed="collapsed"
+      @collapse="collapsed = true"
+      @expand="collapsed = false"
+    >
+      <n-h1>Sider</n-h1>
+    </n-layout-sider>
+    <n-layout style="padding: 24px;">
+      <n-layout-content>
+        <span>Content</span>
+      </n-layout-content>
+      <n-layout-footer>
+        <n-h1>Footer</n-h1>
+      </n-layout-footer>
+    </n-layout>
+  </n-layout>
+</n-layout>
+<n-layout style="height: 240px;">
+  <n-layout-header mode="absolute" style="height: 64px;">
+    Cool Header
+  </n-layout-header>
+  <n-layout mode="absolute" style="top: 64px;">
+    <n-layout-sider
+      mode="absolute"
+      show-trigger
+      collapse-mode="transform"
+      :collapsed-width="120"
+      :width="240"
+      :collapsed="collapsed"
+      @collapse="collapsed = true"
+      @expand="collapsed = false"
+    >
+      <n-h1>Sider</n-h1>
+    </n-layout-sider>
+    <n-layout 
+      mode="absolute"
+      style="padding: 24px;"
+    >
+      <n-layout-content>
+        <span>Content</span>
+      </n-layout-content>
+      <n-layout-footer>
+        <n-h1>Footer</n-h1>
+      </n-layout-footer>
+    </n-layout>
+  </n-layout>
+</n-layout>
+```
+```js
+export default {
+  data () {
+    return {
+      collapsed: false
+    }
+  }
+}
+```

From 19cbbe6ad4fdecb97f43024558b600fa2e0838d7 Mon Sep 17 00:00:00 2001
From: liumeo <liumeo@pku.edu.cn>
Date: Sat, 4 Jan 2020 17:32:23 +0800
Subject: [PATCH 3/3] configProvider-zhcn

---
 .../components/configProvider/enUS/index.md   |   4 +-
 .../configProvider/enUS/namespace.md          |   4 +-
 .../components/configProvider/zhCN/index.md   |  10 ++
 .../configProvider/zhCN/inheritTheme.md       |   7 ++
 .../configProvider/zhCN/namespace.md          | 118 ++++++++++++++++++
 .../components/configProvider/zhCN/theme.md   |  22 ++++
 .../configProvider/zhCN/themeEnvironment.md   |  25 ++++
 .../configProvider/zhCN/transparent.md        |  26 ++++
 8 files changed, 212 insertions(+), 4 deletions(-)
 create mode 100644 demo/documentation/components/configProvider/zhCN/inheritTheme.md
 create mode 100644 demo/documentation/components/configProvider/zhCN/namespace.md
 create mode 100644 demo/documentation/components/configProvider/zhCN/theme.md
 create mode 100644 demo/documentation/components/configProvider/zhCN/themeEnvironment.md
 create mode 100644 demo/documentation/components/configProvider/zhCN/transparent.md

diff --git a/demo/documentation/components/configProvider/enUS/index.md b/demo/documentation/components/configProvider/enUS/index.md
index addef6666..072d59b66 100644
--- a/demo/documentation/components/configProvider/enUS/index.md
+++ b/demo/documentation/components/configProvider/enUS/index.md
@@ -1,5 +1,5 @@
 # Config Provider
-Config Provider is using to set global theme and set namespace for components (detached parts).
+Config Provider is used to set global theme and set namespace for components (detached parts).
 ## Demos
 ```demo
 theme
@@ -7,4 +7,4 @@ namespace
 inherit-theme
 theme-environment
 transparent
-```
\ No newline at end of file
+```
diff --git a/demo/documentation/components/configProvider/enUS/namespace.md b/demo/documentation/components/configProvider/enUS/namespace.md
index f24d7a345..e9504ea45 100644
--- a/demo/documentation/components/configProvider/enUS/namespace.md
+++ b/demo/documentation/components/configProvider/enUS/namespace.md
@@ -80,7 +80,7 @@ export default {
           value: 'song4'
         },
         {
-          label: 'Think For Yourseld',
+          label: 'Think For Yourself',
           value: 'song5'
         },
         {
@@ -115,4 +115,4 @@ export default {
     }
   }
 }
-```
\ No newline at end of file
+```
diff --git a/demo/documentation/components/configProvider/zhCN/index.md b/demo/documentation/components/configProvider/zhCN/index.md
index e69de29bb..a0160cbde 100644
--- a/demo/documentation/components/configProvider/zhCN/index.md
+++ b/demo/documentation/components/configProvider/zhCN/index.md
@@ -0,0 +1,10 @@
+# 全局化配置
+全局化配置用来设置全局主题和组件的命名空间（游离的部分）。
+## 演示
+```demo
+theme
+namespace
+inherit-theme
+theme-environment
+transparent
+```
diff --git a/demo/documentation/components/configProvider/zhCN/inheritTheme.md b/demo/documentation/components/configProvider/zhCN/inheritTheme.md
new file mode 100644
index 000000000..fe83c61a6
--- /dev/null
+++ b/demo/documentation/components/configProvider/zhCN/inheritTheme.md
@@ -0,0 +1,7 @@
+# 继承主题
+如果不设置应用主题，则应用主题默认继承。
+```html
+<n-config-provider>
+  <n-tag>噢</n-tag>
+</n-config-provider>
+```
diff --git a/demo/documentation/components/configProvider/zhCN/namespace.md b/demo/documentation/components/configProvider/zhCN/namespace.md
new file mode 100644
index 000000000..00135d2a5
--- /dev/null
+++ b/demo/documentation/components/configProvider/zhCN/namespace.md
@@ -0,0 +1,118 @@
+# 命名空间
+组件的一部分是游离于 `document.body`的。如需给这些游离的元素添加class，使用应用的 `namespace` 属性。打开开发者工具查看游离的内容。
+```html
+<n-config-provider :namespace="ns">
+  <n-button
+    @click="isActive = true"
+  >
+    激活含游离内容的组件
+  </n-button>
+  <n-modal v-model="isActive">
+    <n-nimbus-form-card
+      width="1032"
+      title="Parklife"
+      :deactivate="() => isActive = false"
+    >
+      <template v-slot:header>
+        v-slot:header
+      </template>
+      <template v-slot:footer>
+        v-slot:footer
+      </template>
+      <template v-slot:content>
+        <n-date-picker
+          v-model="time"
+          type="datetime"
+        />
+        <n-select
+          v-model="selectedValue"
+          size="small"
+          placeholder="请选择类型"
+          :items="items"
+          style="flex-grow: 1;"
+        />
+        <n-tooltip
+          placement="bottom"
+          trigger="click"
+          style="margin-right: 12px;"
+        >
+          <template v-slot:activator>
+            <n-button style="margin: 0;">
+              超跑女神（点击）
+            </n-button>
+          </template>
+          <span>
+            我希望它们全都是超跑女神
+          </span>
+        </n-tooltip>
+      </template>
+    </n-nimbus-form-card>
+  </n-modal>
+</n-config-provider>
+```
+```js
+export default {
+  data () {
+    return {
+      ns: 'custom-app-namespace1',
+      isActive: false,
+      time: null,
+      selectedValue: null,
+      items: [
+        {
+          label: "不能说的秘密",
+          value: 'song0'
+        },
+        {
+          label: '一路向北',
+          value: 'song1'
+        },
+        {
+          label: '米兰的小铁匠',
+          value: 'song2'
+        },
+        {
+          label: "你听得到",
+          value: 'song3'
+        },
+        {
+          label: '阳光宅男',
+          value: 'song4'
+        },
+        {
+          label: '你好吗',
+          value: 'song5'
+        },
+        {
+          label: '简单爱',
+          value: 'song6'
+        },
+        {
+          label: '娘子',
+          value: 'song7'
+        },
+        {
+          label: '说好的幸福呢',
+          value: 'song8'
+        },
+        {
+          label: '可爱女人',
+          value: 'song9'
+        },
+        {
+          label: "那里都是你",
+          value: 'song10'
+        },
+        {
+          label: '无双',
+          value: 'song11'
+        },
+        {
+          label: '等你下课',
+          value: 'song12'
+        }
+      ]
+    }
+  }
+}
+```
diff --git a/demo/documentation/components/configProvider/zhCN/theme.md b/demo/documentation/components/configProvider/zhCN/theme.md
new file mode 100644
index 000000000..512f3058c
--- /dev/null
+++ b/demo/documentation/components/configProvider/zhCN/theme.md
@@ -0,0 +1,22 @@
+# 主题
+设置应用内部组件的主题。
+```html
+<n-config-provider :theme="theme">
+  <n-button @click="theme = 'dark'">深色</n-button>
+  <n-button @click="theme = 'light'">浅色</n-button>
+</n-config-provider>
+```
+```js
+export default {
+  data () {
+    return {
+      theme: 'dark'
+    }
+  }
+}
+```
+```css
+.n-button {
+  margin: 0 12px 8px 0;
+}
+```
diff --git a/demo/documentation/components/configProvider/zhCN/themeEnvironment.md b/demo/documentation/components/configProvider/zhCN/themeEnvironment.md
new file mode 100644
index 000000000..300acfa3a
--- /dev/null
+++ b/demo/documentation/components/configProvider/zhCN/themeEnvironment.md
@@ -0,0 +1,25 @@
+# 主题环境
+```html
+<n-button @click="theme = 'dark'">深色主题</n-button>
+<n-button @click="theme = 'light'">浅色主题</n-button>
+<n-config-provider :theme="theme" :theme-environment="env">
+  <n-config-consumer>
+    <template v-slot="{ themeEnvironment }">
+      {{ themeEnvironment }}
+    </template>
+  </n-config-consumer>
+</n-config-provider>
+```
+```js
+export default {
+  data () {
+    return {
+      theme: 'light',
+      env: {
+        dark: '深色666',
+        light: '浅色666'
+      }
+    }
+  }
+}
+```
diff --git a/demo/documentation/components/configProvider/zhCN/transparent.md b/demo/documentation/components/configProvider/zhCN/transparent.md
new file mode 100644
index 000000000..c8623df39
--- /dev/null
+++ b/demo/documentation/components/configProvider/zhCN/transparent.md
@@ -0,0 +1,26 @@
+# 透明
+如果不需要包装DOM，设置为透明。
+```html
+<n-button @click="theme = 'dark'">深色主题</n-button>
+<n-button @click="theme = 'light'">浅色主题</n-button>
+<n-config-provider :theme="theme" :theme-environment="env" transparent>
+  <n-config-consumer>
+    <template v-slot="{ themeEnvironment }">
+      无包装DOM: {{ themeEnvironment }}
+    </template>
+  </n-config-consumer>
+</n-config-provider>
+```
+```js
+export default {
+  data () {
+    return {
+      theme: 'light',
+      env: {
+        dark: '深色 666',
+        light: '浅色 666'
+      }
+    }
+  }
+}
+```