From 4d4664801c0c5d4cf8c6e05470a8a49fee7bdea2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Mon, 29 Nov 2021 22:05:54 +0800
Subject: [PATCH] =?UTF-8?q?docs(Skeleton):=20=E4=BF=AE=E6=94=B9=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=E5=B9=B6=E8=A1=A5=E5=85=85=E8=8B=B1=E6=96=87=E7=89=88?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/components/skeleton/index.md         |   6 +-
 .../docs/en-US/components/skeleton/index.md   | 169 ++++++++++++++++++
 2 files changed, 172 insertions(+), 3 deletions(-)
 create mode 100644 packages/devui-vue/docs/en-US/components/skeleton/index.md

diff --git a/packages/devui-vue/docs/components/skeleton/index.md b/packages/devui-vue/docs/components/skeleton/index.md
index 2328d551..58bf457c 100644
--- a/packages/devui-vue/docs/components/skeleton/index.md
+++ b/packages/devui-vue/docs/components/skeleton/index.md
@@ -106,7 +106,7 @@ export default defineComponent({
 
 :::
 
-### 拼接模式
+### 细粒度模式
 
 提供细粒度的骨架屏元素，给予开发者更灵活的定制能力。
 :::demo
@@ -155,13 +155,13 @@ export default defineComponent({
 | row-width | `number \| string \| (number \| string)[]` | `["100%"]` | 段落占位图宽度，可传数组来设置每一行的宽度 |
 
 ### d-skeleton-item Props
-拼接模式
+细粒度模式
 |  参数   |   类型    |  默认  | 说明                                                    |
 | :-----: | :-------: | :----: | :------------------------------------------------------ |
 |  shape  | `string`  |   -    | 可选值为`avatar`,`image`,`title`,`paragraph`,`button`。 |
 | animate | `boolean` | `true` | 是否开启动画                                            |
 
-> paragraph 的 API 与默认模式相同；
+> paragraph 的 API 与默认模式相同。
 ### d-skeleton-item__avatar Props
 
 |     参数     |        类型        |  默认   | 说明                             |
diff --git a/packages/devui-vue/docs/en-US/components/skeleton/index.md b/packages/devui-vue/docs/en-US/components/skeleton/index.md
new file mode 100644
index 00000000..3329fd4a
--- /dev/null
+++ b/packages/devui-vue/docs/en-US/components/skeleton/index.md
@@ -0,0 +1,169 @@
+# Skeleton
+
+It is used to display a set of placeholder graphics during content loading.
+
+### When to Use
+
+Set a skeleton in the position where content needs to be loaded, which has better visual effect than Loading in some scenarios.
+
+### Basic Usage
+
+Basic placeholder effect.
+
+:::demo
+
+```vue
+<template>
+  <d-skeleton :row="3" />
+</template>
+```
+
+:::
+
+
+### Complex Combination
+
+:::demo
+
+```vue
+<template>
+  <div class="skeleton-btn-groups">
+      <div class="skeleton-btn">
+          Skeleton：
+         <d-switch v-model:checked="loading" />
+      </div>
+      <div class="skeleton-btn">
+          Animation：
+         <d-switch v-model:checked="animate" />
+      </div>
+      <div class="skeleton-btn">
+          Avatar：
+         <d-switch v-model:checked="avatar" />
+      </div>
+      <div class="skeleton-btn">
+          Title：
+         <d-switch v-model:checked="title" />
+      </div>
+      <div class="skeleton-btn">
+          Paragraph：
+         <d-switch v-model:checked="paragraph" />
+      </div>
+      <div class="skeleton-btn">
+          Round Avatar：
+         <d-switch v-model:checked="roundAvatar" />
+      </div>
+      <div class="skeleton-btn">
+          Round Corners：
+         <d-switch v-model:checked="round" />
+      </div>
+  </div>
+  <d-skeleton :row="3" :animate="animate" :avatar="avatar" :avatar-shape="roundAvatar?'':'square'" :title="title" :paragraph="paragraph" :loading="loading" :round="round">
+      <div>
+        <div>row one</div>
+        <div>row two</div>
+        <div>row three</div>
+        <div>row four</div>
+      </div>
+  </d-skeleton>
+</template>
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const loading = ref(true)
+    const animate = ref(true)
+    const avatar = ref(true)
+    const title = ref(true)
+    const paragraph = ref(true)
+    const roundAvatar = ref(true)
+    const round = ref(false)
+
+    return {
+      loading,
+	    animate,
+      avatar,
+      title,
+      paragraph,
+      roundAvatar,
+      round
+    }
+  }
+})
+</script>
+<style>
+.skeleton-btn-groups{
+  display: flex;
+  margin-bottom: 1rem;
+}
+.skeleton-btn{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+</style>
+```
+
+:::
+
+### Fine-grit Mode
+
+Provide fine-grained skeleton elements to give developers more flexibility for customization.
+:::demo
+
+```vue
+<template>
+  <d-skeleton-item :shape="'avatar'" style="margin-left:55px;width:80px;height:80px;" />
+  <d-skeleton-item :shape="'image'" />
+  <d-skeleton-item :shape="'title'" />
+  <d-skeleton-item :shape="'paragraph'" :row="3" :row-width="['75%','50%']" />
+  <d-skeleton-item :shape="'button'" />
+</template>
+```
+
+:::
+
+### d-skeleton Props
+
+|   Parameter    |   Type    |  Default   | Description                                          |
+| :-------: | :-------: | :-----: | :-------------------------------------------- |
+|  loading  | `boolean` | `true`  | Choose whether to display skeleton.Subcomponent content will be shown when Loading is `false` . |
+|  animate  | `boolean` | `true`  | Choose whether to enable animation.                                  |
+|  avatar   | `boolean` | `false` | Choose whether to display the avatar placeholder picture.                            |
+|   title   | `boolean` | `true`  | Choose whether to display a title placeholder picture.                            |
+| paragraph | `boolean` | `true`  | Choose whether to display a paragraph placeholder picture.                             |
+|   round   | `boolean` | `false` | Choose whether to display headings and paragraphs in round corners.                |
+
+### d-skeleton__avatar Props
+
+|     Parameter     |        Type        |  Default   | Description                             |
+| :----------: | :----------------: | :-----: | :------------------------------- |
+| avatar-size  | `number \| string` | `40px`  | Size of avatar placeholder picture.                   |
+| avatar-shape |      `string`      | `round` | The shape of head placeholder picture with the optional value `square`. |
+
+### d-skeleton__title Props
+
+|    Parameter     |        Type        | Default  | Description                 |
+| :---------: | :----------------: | :---: | :------------------- |
+| title-width | `number \| string` | `40%` | Width of the title placeholder picture. |
+
+### d-skeleton__paragraph Props
+
+|   Parameter    |                    Type                    |    Default    | Description                                       |
+| :-------: | :----------------------------------------: | :--------: | :----------------------------------------- |
+|    row    |                  `number`                  |    `0`     | The number of paragraph placeholder picture lines.                             |
+| row-width | `number \| string \| (number \| string)[]` | `["100%"]` | Paragraph placeholder picture widths that can be passed to arrays to set the width of each line. |
+
+### d-skeleton-item Props
+Fine-grit Mode
+|  Parameter   |   Type    |  Default  | Description                                                    |
+| :-----: | :-------: | :----: | :------------------------------------------------------ |
+|  shape  | `string`  |   -    | The optional values are `avatar`,`image`,`title`,`paragraph`,`button`. |
+| animate | `boolean` | `true` | Choose whether to enable animation.                                            |
+
+> The Paragraph API is the same as the default mode.
+### d-skeleton-item__avatar Props
+
+|     Parameter     |        Type        |  Default   | Description                             |
+| :----------: | :----------------: | :-----: | :------------------------------- |
+| avatar-shape |      `string`      | `round` | The shape of placeholder picture with the optional value `square`. |
\ No newline at end of file
-- 
Gitee