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

demo/documentation/components/avatar/enUS/shape.md

@@ -1,4 +1,4 @@
-# Size
+# Shape
 
 Avatar can be circle shaped.
 

demo/documentation/components/avatar/zhCN/badge.md

@@ -0,0 +1,7 @@
+# 徽标 
+
+```html
+<n-badge value="666">
+  <n-avatar>666</n-avatar>
+</n-badge>
+```

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

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

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

@@ -0,0 +1,9 @@
+# 头像
+```demo
+size
+shape
+color
+badge
+icon
+name-size
+```

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

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"/>
+```

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"/>
+```

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

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

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

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

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

demo/documentation/components/button/zhCN/icon.md

@@ -1,5 +1,5 @@
 # 图标
-在按钮上使用图标
+在按钮上使用图标。
 ```html
 <n-button icon="md-save">Save</n-button>
 <n-button icon="md-save" icon-position="right">Save</n-button>
@@ -8,4 +8,4 @@
 .n-button {
   margin: 0 8px 8px 0;
 }
-```
+```

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

demo/documentation/components/button/zhCN/loading.md

@@ -1,5 +1,5 @@
 # 加载中
-按钮有加载状态
+按钮有加载状态。
 ```html
 <n-button
   icon="md-save"

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

demo/documentation/components/card/enUS/segment.md

@@ -1,5 +1,5 @@
 # Segmented
-`header`, `content`, `footer` and action can be `hard` or `soft` segmented.
+`header`, `content`, `footer` and `action` can be `hard` or `soft` segmented.
 ```html
 <n-card title="Card Segmented Demo" :segmented="{
   header: 'soft',
@@ -9,7 +9,7 @@
   <template v-slot:header-extra>
     v-slot:header-extra
   </template>
-  Card content
+  Card Content
   <template v-slot:footer>
     v-slot:footer
   </template>

demo/documentation/components/card/enUS/slots.md

@@ -1,10 +1,10 @@
-# Slots Demo
+# Slots
 ```html
 <n-card title="Card Slots Demo">
   <template v-slot:header-extra>
     v-slot:header-extra
   </template>
-  Card content
+  Card Content
   <template v-slot:footer>
     v-slot:footer
   </template>
@@ -12,4 +12,4 @@
     v-slot:action
   </template>
 </n-card>
-```
+```

demo/documentation/components/card/zhCN/basic.md

@@ -0,0 +1,12 @@
+# 基础
+基础卡片
+```html
+<n-card title="卡片">
+  卡片内容
+</n-card>
+```
+```css
+.n-card {
+  max-width: 300px;
+}
+```

demo/documentation/components/card/zhCN/border.md

@@ -0,0 +1,7 @@
+# 边框
+卡片可以没有边框。
+```html
+<n-card :bordered="false" title="无边框的卡片">
+  卡片内容
+</n-card>
+```

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

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

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

@@ -0,0 +1,10 @@
+# 卡片
+```demo
+basic
+size
+cover
+slots
+border
+segment
+closable
+```

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+# 折叠面板
+```demo
+basic
+accordion
+nested
+```

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

demo/documentation/components/divider/enUS/basic.md

@@ -2,5 +2,5 @@
 ```html
 I love her.
 <n-divider />
-She love him.
-```
+She loves him.
+```

demo/documentation/components/divider/enUS/content.md

@@ -4,13 +4,13 @@ I love her.
 <n-divider title-placement="left">
   A Happy Ending
 </n-divider>
-She love him.
+She loves him.
 <n-divider title-placement="right">
   A Happy Ending
 </n-divider>
-He love me.
+He loves me.
 <n-divider dashed>
   A Happy Ending
 </n-divider>
 Oops.
-```
+```

demo/documentation/components/divider/zhCN/basic.md

@@ -0,0 +1,6 @@
+# 基础
+```html
+我爱她。
+<n-divider />
+她爱他。
+```

demo/documentation/components/divider/zhCN/content.md

@@ -0,0 +1,16 @@
+# 标题
+```html
+我爱她。
+<n-divider title-placement="left">
+  大团圆结局
+</n-divider>
+她爱他。
+<n-divider title-placement="right">
+  大团圆结局
+</n-divider>
+他爱我。
+<n-divider dashed>
+  大团圆结局
+</n-divider>
+完了。
+```

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

@@ -0,0 +1,6 @@
+# 分割线
+```demo
+basic
+content
+vertical
+```

demo/documentation/components/divider/zhCN/vertical.md

@@ -0,0 +1,4 @@
+# 垂直
+```html
+大<n-divider vertical />团圆<n-divider vertical />结局
+```