Merge pull request #66 from tracer1023/master

docs：update Chinese description of components
kubesphere · Oct 20, 2021 · 53a0ba1 · 53a0ba1
2 parents 902174f + 26104c2
commit 53a0ba1
Show file tree

Hide file tree

Showing 20 changed files with 230 additions and 189 deletions.
diff --git a/docs/docs/zh/components/Alert.mdx b/docs/docs/zh/components/Alert.mdx
@@ -9,11 +9,10 @@ order: 1
 ## 基础用法
 
 警告提示，展现需要关注的信息。当某个页面或页面局部表单需要向用户显示警告当信息时使用，非浮层当静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
-代码演示
 
 ```js live=true
 <Alert title="KubeSphere">
-    Kubesphere.io is an upstream project of the KubeSphere container management platform.
+  Kubesphere.io is an upstream project of the KubeSphere container management platform.
 </Alert>
 ```
 
@@ -23,17 +22,17 @@ order: 1
 
 ```js live=true
 <Group direction="row" grow>
-    <Alert title="KubeSphere">
-      Kubesphere.io is an upstream project of the KubeSphere container management platform.
-    </Alert>
-    <Alert title="KubeSphere" type="warning">
-      Kubesphere.io is an upstream project of the KubeSphere container management platform.
-    </Alert>
-    <Alert title="KubeSphere" type="error">
-      Kubesphere.io is an upstream project of the KubeSphere container management platform.
-    </Alert>
-    <Alert title="KubeSphere" type="info" closable>
-      Kubesphere.io is an upstream project of the KubeSphere container management platform.
-    </Alert>
-  </Group>
+  <Alert title="KubeSphere">
+    Kubesphere.io is an upstream project of the KubeSphere container management platform.
+  </Alert>
+  <Alert title="KubeSphere" type="warning">
+    Kubesphere.io is an upstream project of the KubeSphere container management platform.
+  </Alert>
+  <Alert title="KubeSphere" type="error">
+    Kubesphere.io is an upstream project of the KubeSphere container management platform.
+  </Alert>
+  <Alert title="KubeSphere" type="info" closable>
+    Kubesphere.io is an upstream project of the KubeSphere container management platform.
+  </Alert>
+</Group>
 ```
diff --git a/docs/docs/zh/components/Badge.mdx b/docs/docs/zh/components/Badge.mdx
@@ -8,35 +8,40 @@ order: 1
 
 ## 基础用法
 
-状态提示，单纯的 count 值
+状态提示，单纯的 count 值。
 
 ```js live=true
-<Group>
+() => (
+  <Group>
     <Badge>3</Badge>
     <Badge color="warning">12</Badge>
-</Group>
+  </Group>
+)
 ```
 
 ## 不同颜色标记
 
-徽标内容可以是文本，也可以是数字，通过设置 color 属性可以设置组件的颜色
+徽标内容可以是文本，也可以是数字，通过设置 color 属性可以设置组件的颜色。
 
 ```js live=true
-<Group>
+() => (
+  <Group>
     <Badge color="warning">KubeSphere</Badge>
     <Badge color="error">#12</Badge>
     <Badge color="secondary">KubeSphere</Badge>
     <Badge color="success">KubeSphere</Badge>
     <Badge color="blue">9</Badge>
-</Group>
+  </Group>
+)
 ```
 
 ## 带阴影标记
 
-可以设置 shadow，给徽标增加阴影效果。
+可以设置 shadow 给徽标增加阴影效果。
 
 ```js live=true
-<Group>
+() => (
+  <Group>
     <Badge color="warning" shadow>
       KubeSphere
     </Badge>
@@ -52,7 +57,8 @@ order: 1
     <Badge color="blue" shadow>
       9
     </Badge>
-</Group>
+  </Group>
+)
 ```
 
 

diff --git a/docs/docs/zh/components/Banner.mdx b/docs/docs/zh/components/Banner.mdx
@@ -8,27 +8,27 @@ order: 1
 
 ## 何时使用
 
-Banner 是整个展示页面重要的组成部分，一般介绍产品的名称和简介。
+Banner 是展示整个页面重要的组成部分，一般介绍产品的名称和简介。
 
 ## 代码演示
 
 Banner 可以展示产品图标和简介，BannerTip 可以展示子条目。
 
 ```js live=true
 () => {
- const data = [
-   {
-     label: 'KubeSphere',
-     value: 'KubeSphere',
-   },
-   {
-     label: 'Jenkins',
-     value: 'Jenkins',
-   },
-   {
-     label: 'Kubernetes',
-     value: 'Kubernetes',
-   },
+  const data = [
+  {
+    label: 'KubeSphere',
+    value: 'KubeSphere',
+  },
+  {
+    label: 'Jenkins',
+    value: 'Jenkins',
+  },
+  {
+    label: 'Kubernetes',
+    value: 'Kubernetes',
+  },
  ];
  const { Cluster } = KubeIcon;
  return (

diff --git a/docs/docs/zh/components/Card.mdx b/docs/docs/zh/components/Card.mdx
@@ -37,7 +37,7 @@ order: 1
 ```
 
 
-## 带hover状态
+## 带 hover 状态
 
 ```js live=true
 () => (

diff --git a/docs/docs/zh/components/Checkbox.mdx b/docs/docs/zh/components/Checkbox.mdx
@@ -8,12 +8,11 @@ order: 1
 
 ## 何时使用
 
-单独使用可以表示两种状态之间的切换，checkbox 一般用于状态标记，需要和提交的操作配合;
-用于在一组可选项中进行多项选择时。
+单独使用可以表示两种状态之间的切换，checkbox 一般用于状态标记，需要和提交的操作配合，或者用于在一组可选项中进行多项选择时。
 
 ## 基础用法
 
-通过 defaultChecked 属性来设置默认勾选。
+通过 defaultChecked 属性来设置默认勾选，通过 onChange 可以添加事件回调函数
 
 ```js live=true
 () => {
@@ -31,7 +30,7 @@ order: 1
 
 ## 禁用状态
 
-多选框不可用状态
+添加disabled 属性即可让按钮处于不可用状态，同时按钮样式也会发生改变。
 
 ```js live=true
 () => {
@@ -54,7 +53,7 @@ order: 1
 
 ## Indeterminate状态
 
-indeterminate 属性用来表示 checkbox 的不确定状态，一般用于实现全选的效果
+indeterminate 属性用来表示 checkbox 的不确定状态，一般用于实现全选的效果。
 
 ```js live=true
 () => {

diff --git a/docs/docs/zh/components/Descriptions.mdx b/docs/docs/zh/components/Descriptions.mdx
@@ -8,9 +8,7 @@ order: 1
 
 ## 基础用法
 
-列表形式展示多个字段
-
-## 代码演示
+列表形式展示字段
 
 ```js live=true
 () => (

diff --git a/docs/docs/zh/components/Divider.mdx b/docs/docs/zh/components/Divider.mdx
@@ -6,12 +6,13 @@ description: '间隔内容的分割线'
 order: 1
 ---
 
-## 基础用法
+## 何时使用
 
 对不同章节对文本段落进行分割
 
 对行内文字/链接进行分割
 
+## 基础用法
 
 ```js live=true
 <Group spacing="xl">
@@ -20,9 +21,11 @@ order: 1
 ```
 
 ## 分割线的样式
-使用variant可以设置分割线的显示形式，默认为 solid (实线)，dotted (点线)，dashed (虚线)
-当分割线为垂直方向时，使用margins设置分割线左右的外边距
-当分割线为水平方向时，使用margins设置分割线上下左右的外边距
+使用 variant 可以设置分割线的显示形式，默认为 solid (实线)，dotted (点线)，dashed (虚线)
+
+当分割线为垂直方向时，使用 margins 设置分割线左右的外边距
+
+当分割线为水平方向时，使用 margins 设置分割线上下左右的外边距
 
 ```js live=true
 <Group spacing="xl">

diff --git a/docs/docs/zh/components/Form.mdx b/docs/docs/zh/components/Form.mdx
@@ -10,8 +10,6 @@ order: 1
 
 表单控件，用于创建一个实体或收集信息，需要对输入对数据类型进行校验时。
 
-## 代码演示
-
 ```js live=true
 () => {
   const onFinish = (values) => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,7 +37,7 @@ order: 1 @@
     ```
-    ## 带hover状态
+    ## 带 hover 状态
     ```js live=true
     () => (
@@ Expand Down @@