Merge branch 'master' of github.com:07akioni/naive-ui

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

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'
         },
         {

demo/documentation/components/configProvider/zhCN/index.md

@@ -0,0 +1,10 @@
+# 全局化配置
+全局化配置用来设置全局主题和组件的命名空间（游离的部分）。
+## 演示
+```demo
+theme
+namespace
+inherit-theme
+theme-environment
+transparent
+```

demo/documentation/components/configProvider/zhCN/inheritTheme.md

@@ -0,0 +1,7 @@
+# 继承主题
+如果不设置应用主题，则应用主题默认继承。
+```html
+<n-config-provider>
+  <n-tag>噢</n-tag>
+</n-config-provider>
+```

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'
+        }
+      ]
+    }
+  }
+}
+```

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

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

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