Merge pull request #63 from tracer1023/master

feat：Add Chinese document of components
kubesphere · Oct 20, 2021 · 902174f · 902174f
2 parents da38913 + a2906df
commit 902174f
Show file tree

Hide file tree

Showing 35 changed files with 2,025 additions and 5 deletions.
diff --git a/docs/docs/zh/components/Alert.mdx b/docs/docs/zh/components/Alert.mdx
@@ -0,0 +1,39 @@
+---
+group: 'components'
+category: 'state'
+title: Alert
+description: '警告提示'
+order: 1
+---
+
+## 基础用法
+
+警告提示，展现需要关注的信息。当某个页面或页面局部表单需要向用户显示警告当信息时使用，非浮层当静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
+代码演示
+
+```js live=true
+<Alert title="KubeSphere">
+    Kubesphere.io is an upstream project of the KubeSphere container management platform.
+</Alert>
+```
+
+## 不同类型的警告
+
+通过 type 属性设置警告类型。
+
+```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>
+```
diff --git a/docs/docs/zh/components/Badge.mdx b/docs/docs/zh/components/Badge.mdx
@@ -0,0 +1,60 @@
+---
+group: 'components'
+category: 'state'
+title: Badge
+description: 'Badge图标右上角的圆形徽标数字'
+order: 1
+---
+
+## 基础用法
+
+状态提示，单纯的 count 值
+
+```js live=true
+<Group>
+    <Badge>3</Badge>
+    <Badge color="warning">12</Badge>
+</Group>
+```
+
+## 不同颜色标记
+
+徽标内容可以是文本，也可以是数字，通过设置 color 属性可以设置组件的颜色
+
+```js live=true
+<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>
+```
+
+## 带阴影标记
+
+可以设置 shadow，给徽标增加阴影效果。
+
+```js live=true
+<Group>
+    <Badge color="warning" shadow>
+      KubeSphere
+    </Badge>
+    <Badge color="error" shadow>
+      #12
+    </Badge>
+    <Badge color="secondary" shadow>
+      KubeSphere
+    </Badge>
+    <Badge color="success" shadow>
+      KubeSphere
+    </Badge>
+    <Badge color="blue" shadow>
+      9
+    </Badge>
+</Group>
+```
+
+
+
+
diff --git a/docs/docs/zh/components/Banner.mdx b/docs/docs/zh/components/Banner.mdx
@@ -0,0 +1,55 @@
+---
+group: 'components'
+category: 'state'
+title: Banner
+description: '横幅'
+order: 1
+---
+
+## 何时使用
+
+Banner 是整个展示页面重要的组成部分，一般介绍产品的名称和简介。
+
+## 代码演示
+
+Banner 可以展示产品图标和简介，BannerTip 可以展示子条目。
+
+```js live=true
+() => {
+ const data = [
+   {
+     label: 'KubeSphere',
+     value: 'KubeSphere',
+   },
+   {
+     label: 'Jenkins',
+     value: 'Jenkins',
+   },
+   {
+     label: 'Kubernetes',
+     value: 'Kubernetes',
+   },
+ ];
+ const { Cluster } = KubeIcon;
+ return (
+    <div style={{ height: '300px', width: '100%', backgroundColor: '#eff4f9', padding: '20px' }}>
+      <Banner
+        icon={<Cluster />}
+        title="集群节点"
+        description="集群节点提供了当前集群下节点的运行状态，以及可以编辑删除节点"
+        navs={data}
+      >
+        <Navs data={data} />
+        <BannerTip title="集群节点的类型?" key="node-type">
+          节点分为主控 (Master) 节点和工作 (Worker) 节点
+        </BannerTip>
+        <BannerTip title="什么是节点污点?" key="node-dirty">
+          节点污点 (Taints) 可以阻止某些容器组 (Pod) 副本部署至该节点中, 与容忍度 (Tolerations)
+          一起工作确保容器组不会被调度到不合适的节点上
+        </BannerTip>
+      </Banner>
+    </div>
+  )
+}
+```
+
diff --git a/docs/docs/zh/components/Button.mdx b/docs/docs/zh/components/Button.mdx
@@ -0,0 +1,91 @@
+---
+group: 'components'
+category: 'state'
+title: Button
+description: '常用操作按钮'
+order: 1
+---
+
+## 基础用法
+
+标记一组操作命令，响应用户的点击行为，触发相应的业务逻辑。
+
+```js live=true
+<Group spacing="xl">
+  <Button variant="filled" color="secondary" shadow radius="xl">
+    KubeSphere111
+  </Button>
+  <Button variant="filled" color="default" radius="xl">
+    KubeSphere
+  </Button>
+  <Button variant="text" radius="xl">
+    KubeSphere
+  </Button>
+  <Button variant="filled" color="default" radius="xl" disabled>
+    KubeSphere
+  </Button>
+</Group>
+```
+
+## 按钮样式
+
+可以设置 Variant 来改变 button 的视觉效果。您可以设置值为 filled，text，outline, 或者 link。
+
+```js live=true
+<Group spacing="xl">
+  <Button variant="filled" color="secondary">
+    KubeSphere
+  </Button>
+  <Button variant="filled" color="default" radius="xl">
+    KubeSphere
+  </Button>
+  <Button variant="text" radius="xl">
+    KubeSphere
+  </Button>
+  <Button variant="link" color="default">
+    KubeSphere
+  </Button>
+</Group>
+```
+
+## 按钮颜色
+
+通过 color 设置按钮的颜色，默认有四种按钮颜色，default，success，error，warning
+
+```js live=true
+<Group spacing="xl">
+  <Button variant="filled" color="default">
+    KubeSphere
+  </Button>
+  <Button variant="filled" color="success">
+    KubeSphere
+  </Button>
+  <Button variant="filled" color="error">
+    KubeSphere
+  </Button>
+  <Button variant="filled" color="warning">
+    KubeSphere
+  </Button>
+</Group>
+```
+
+## 按钮尺寸
+
+可以使用 size 和 radius 属性可以改变按钮的大小以及圆角。你可以设置值为 xs，sm，md，lg，xl.
+
+```js live=true
+<Group spacing="xl">
+  <Button variant="filled" color="default" radius="sm" size="sm">
+    KubeSphere
+  </Button>
+  <Button variant="filled" color="success" radius="md" size="md">
+    KubeSphere
+  </Button>
+  <Button variant="filled" color="error" radius="lg" size="sm">
+    KubeSphere
+  </Button>
+  <Button variant="filled" color="warning" radius="xl" size="lg">
+    KubeSphere
+  </Button>
+</Group>
+```
diff --git a/docs/docs/zh/components/Card.mdx b/docs/docs/zh/components/Card.mdx
@@ -0,0 +1,54 @@
+---
+group: 'components'
+category: 'state'
+title: Card
+description: '卡片'
+order: 1
+---
+
+## 基础用法
+
+将信息聚合在卡片容器中展示。
+
+```js live=true
+() => (
+  <div style={{ backgroundColor: '#eff4f9', padding: '50px' }}>
+    <Card>
+      Kubesphere.io is an upstream project of the KubeSphere container management platform.
+    </Card>
+  </div>
+)
+```
+
+## 带章节标题
+
+```js live=true
+() => (
+  <div style={{ backgroundColor: '#eff4f9', padding: '50px' }}>
+    <Card sectionTitle="section title">
+      Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.
+      <br />
+      New functionality can even be introduced by a simple agreement between a client and a server
+      <br />
+      about a new header's semantics.
+    </Card>
+  </div>
+)
+```
+
+
+## 带hover状态
+
+```js live=true
+() => (
+  <div style={{ backgroundColor: '#eff4f9', padding: '50px' }}>
+    <Card sectionTitle="section title" hoverable>
+      Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.
+      <br />
+      New functionality can even be introduced by a simple agreement between a client and a server
+      <br />
+      about a new header's semantics.
+    </Card>
+  </div>
+)
+```
diff --git a/docs/docs/zh/components/Center.mdx b/docs/docs/zh/components/Center.mdx
@@ -0,0 +1,16 @@
+---
+group: 'components'
+category: 'state'
+title: Center
+description: '组件内子元素水平垂直居中'
+order: 1
+---
+
+## 基础用法
+
+定义一个 center 盒子，盒子内子元素垂直水平居中
+
+```js live=true
+<Center style={{ background: '#eee',height:'50px',width:'100%' }}>
+   Center组件的子元素水平垂直居中
+</Center>