Merge pull request #791 from TuSimple/docs

Docs

src/anchor/demos/enUS/basic.demo.md

@@ -5,7 +5,7 @@
   <n-switch v-model:value="showRail" /> Show Rail
   <n-switch v-model:value="showBackground" /> Show Background
 </n-space>
-<n-anchor>
+<n-anchor :show-rail="showRail" :show-background="showBackground">
   <n-anchor-link title="Demos" href="#Demos">
     <n-anchor-link title="Basic" href="#basic" />
     <n-anchor-link title="Ignore-Gap" href="#ignore-gap" />

src/divider/demos/zhCN/index.demo-entry.md

@@ -15,7 +15,7 @@ vertical
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
 | dashed | `boolean` | `false` | 是否使用虚线分割 |
-| title-placement | `'left' \| 'right' \| 'center'` | `'center'` | title 的位置 |
+| title-placement | `'left' \| 'right' \| 'center'` | `'center'` | 标题的位置 |
 | vertical | `boolean` | `false` | 是否垂直分隔 |
 
 ## Slots

src/drawer/demos/enUS/index.demo-entry.md

@@ -9,6 +9,7 @@ basic
 multiple
 target
 closable
+slot
 ```
 
 ## Props

src/drawer/demos/enUS/slot.demo.md

@@ -0,0 +1,32 @@
+# Custom Header and Bottom Content
+
+```html
+<n-button-group>
+  <n-button @click="activate">Open</n-button>
+</n-button-group>
+<n-drawer v-model:show="active" :width="502">
+  <n-drawer-content>
+    <template #header>Header</template>
+    <template #footer>
+      <n-button>Footer</n-button>
+    </template>
+  </n-drawer-content>
+</n-drawer>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const active = ref(false)
+    const activate = () => {
+      active.value = true
+    }
+    return {
+      active,
+      activate
+    }
+  }
+})
+```

src/drawer/demos/zhCN/index.demo-entry.md

@@ -9,6 +9,7 @@ basic
 multiple
 target
 closable
+slot
 custom-style-debug
 dark-1-debug
 dark-2-debug

src/drawer/demos/zhCN/slot.demo.md

@@ -0,0 +1,32 @@
+# 自定义头部和底部内容
+
+```html
+<n-button-group>
+  <n-button @click="activate">打开</n-button>
+</n-button-group>
+<n-drawer v-model:show="active" :width="502">
+  <n-drawer-content>
+    <template #header>Header</template>
+    <template #footer>
+      <n-button>Footer</n-button>
+    </template>
+  </n-drawer-content>
+</n-drawer>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const active = ref(false)
+    const activate = () => {
+      active.value = true
+    }
+    return {
+      active,
+      activate
+    }
+  }
+})
+```

src/drawer/styles/light.ts

@@ -23,7 +23,7 @@ export const self = (vars: ThemeCommonVars) => {
     color: modalColor,
     textColor: textColor2,
     titleTextColor: textColor1,
-    titleFontSize: '20px',
+    titleFontSize: '18px',
     titleFontWeight: fontWeightStrong,
     boxShadow: boxShadow3,
     lineHeight,

src/dropdown/demos/enUS/icon.demo.md

@@ -0,0 +1,49 @@
+# Icon
+
+```html
+<n-dropdown :options="options">
+  <n-button>User profile</n-button>
+</n-dropdown>
+```
+
+```js
+import { h, defineComponent } from 'vue'
+import { NIcon } from 'naive-ui'
+import {
+  PersonCircleOutline as UserIcon,
+  Pencil as EditIcon,
+  LogOutOutline as LogoutIcon
+} from '@vicons/ionicons5'
+
+const renderIcon = (icon) => {
+  return () => {
+    return h(NIcon, null, {
+      default: () => h(icon)
+    })
+  }
+}
+
+export default defineComponent({
+  setup () {
+    return {
+      options: [
+        {
+          label: 'Profile',
+          key: 'profile',
+          icon: renderIcon(UserIcon)
+        },
+        {
+          label: 'Edit Profile',
+          key: 'editProfile',
+          icon: renderIcon(EditIcon)
+        },
+        {
+          label: 'Logout',
+          key: 'logout',
+          icon: renderIcon(LogoutIcon)
+        }
+      ]
+    }
+  }
+})
+```

src/dropdown/demos/enUS/index.demo-entry.md

@@ -6,6 +6,7 @@ When you have some functions to trigger.
 
 ```demo
 basic
+icon
 trigger
 cascade
 arrow

src/dropdown/demos/zhCN/icon.demo.md

@@ -0,0 +1,49 @@
+# 图标
+
+```html
+<n-dropdown :options="options">
+  <n-button>用户资料</n-button>
+</n-dropdown>
+```
+
+```js
+import { h, defineComponent } from 'vue'
+import { NIcon } from 'naive-ui'
+import {
+  PersonCircleOutline as UserIcon,
+  Pencil as EditIcon,
+  LogOutOutline as LogoutIcon
+} from '@vicons/ionicons5'
+
+const renderIcon = (icon) => {
+  return () => {
+    return h(NIcon, null, {
+      default: () => h(icon)
+    })
+  }
+}
+
+export default defineComponent({
+  setup () {
+    return {
+      options: [
+        {
+          label: '用户资料',
+          key: 'profile',
+          icon: renderIcon(UserIcon)
+        },
+        {
+          label: '编辑用户资料',
+          key: 'editProfile',
+          icon: renderIcon(EditIcon)
+        },
+        {
+          label: '退出登录',
+          key: 'logout',
+          icon: renderIcon(LogoutIcon)
+        }
+      ]
+    }
+  }
+})
+```

src/dropdown/demos/zhCN/index.demo-entry.md

@@ -6,6 +6,7 @@
 
 ```demo
 basic
+icon
 trigger
 cascade
 arrow

src/input/demos/enUS/basic.demo.md

@@ -10,11 +10,13 @@ Basic usage of input.
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      value: null
+      value: ref(null)
     }
   }
-}
+})
 ```

src/input/demos/enUS/icon.demo.md

@@ -26,10 +26,11 @@ Fill content in prefix or suffix of the input.
 
 ```js
 import { FlashOutline as FlashIcon } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     FlashIcon
   }
-}
+})
 ```

src/input/demos/enUS/input-group.demo.md

@@ -30,16 +30,18 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      selectOptions: [
+      selectOptions: ref([
         {
           label: 'option',
           value: 'option'
         }
-      ],
-      cascaderOptions: [
+      ]),
+      cascaderOptions: ref([
         {
           label: 'option-1',
           value: 'option-1',
@@ -50,8 +52,8 @@ export default {
             }
           ]
         }
-      ]
+      ])
     }
   }
-}
+})
 ```

src/input/demos/zhCN/basic.demo.md

@@ -14,11 +14,13 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      value: null
+      value: ref(null)
     }
   }
-}
+})
 ```

src/input/demos/zhCN/icon-debug.demo.md

@@ -96,12 +96,13 @@
 
 ```js
 import { MdSearch } from '@vicons/ionicons4'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     MdSearch
   }
-}
+})
 ```
 
 ```css

src/input/demos/zhCN/icon.demo.md

@@ -26,10 +26,11 @@
 
 ```js
 import { FlashOutline as FlashIcon } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     FlashIcon
   }
-}
+})
 ```

src/input/demos/zhCN/input-group.demo.md

@@ -30,26 +30,18 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      value1: null,
-      value2: null,
-      value3: null,
-      value4: null,
-      value5: 'option',
-      value6: null,
-      value7: ['option'],
-      value8: null,
-      value9: null,
-      value10: null,
-      selectOptions: [
+      selectOptions: ref([
         {
           label: 'option',
           value: 'option'
         }
-      ],
-      cascaderOptions: [
+      ]),
+      cascaderOptions: ref([
         {
           label: 'option-1',
           value: 'option-1',
@@ -60,8 +52,8 @@ export default {
             }
           ]
         }
-      ]
+      ])
     }
   }
-}
+})
 ```