feat(Skeleton): theme support four type

src/skeleton/demos/avatar-text.vue

@@ -1,4 +1,31 @@
 <template>
-  <t-skeleton theme="avatar-text"></t-skeleton>
+  <div class="group">
+    <t-skeleton class="group-avatar" :row-col="rowColsAvater" :loading="loading"></t-skeleton>
+    <t-skeleton class="group-content" :row-col="rowColsContent" :loading="loading"></t-skeleton>
+  </div>
 </template>
-<script lang="ts"></script>
+<script lang="ts" setup>
+import { toRefs, defineProps } from 'vue';
+
+const props = defineProps({
+  loading: Boolean,
+});
+
+const { loading } = toRefs(props);
+const rowColsAvater = [{ size: '48px', type: 'circle' }];
+const rowColsContent = [{ width: '50%' }, { width: '100%' }];
+</script>
+<style lang="less" scoped>
+.group {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.group-avatar {
+  margin-right: 12px;
+}
+
+.group-content {
+  width: 100%;
+}
+</style>

src/skeleton/demos/base.vue

@@ -1,4 +1,13 @@
 <template>
-  <t-skeleton />
+  <t-skeleton :theme="theme" :loading="loading" />
 </template>
-<script lang="ts"></script>
+<script lang="ts" setup>
+import { toRefs, defineProps } from 'vue';
+
+const props = defineProps({
+  theme: String,
+  loading: Boolean,
+});
+
+const { loading } = toRefs(props);
+</script>

src/skeleton/demos/flashed.vue

@@ -1,4 +1,30 @@
 <template>
-  <t-skeleton animation="flashed" />
+  <div class="group">
+    <t-skeleton class="group-avatar" :row-col="rowColsAvater" :loading="loading"></t-skeleton>
+    <t-skeleton class="group-content" animation="flashed" theme="paragraph" :loading="loading" />
+  </div>
 </template>
-<script lang="ts"></script>
+<script lang="ts" setup>
+import { toRefs, defineProps } from 'vue';
+
+const props = defineProps({
+  loading: Boolean,
+});
+
+const { loading } = toRefs(props);
+const rowColsAvater = [{ size: '48px', type: 'circle' }];
+</script>
+
+<style lang="less" scoped>
+.group {
+  display: flex;
+}
+
+.group-avatar {
+  margin-right: 12px;
+}
+
+.group-content {
+  width: 100%;
+}
+</style>

src/skeleton/demos/gradient.vue

@@ -1,4 +1,12 @@
 <template>
-  <t-skeleton animation="gradient" />
+  <t-skeleton animation="gradient" theme="paragraph" :loading="loading" />
 </template>
-<script lang="ts"></script>
+<script lang="ts" setup>
+import { toRefs, defineProps } from 'vue';
+
+const props = defineProps({
+  loading: Boolean,
+});
+
+const { loading } = toRefs(props);
+</script>

src/skeleton/demos/grid.vue

@@ -0,0 +1,28 @@
+<template>
+  <t-skeleton :row-col="grid" :loading="loading"></t-skeleton>
+</template>
+<script lang="ts" setup>
+import { toRefs, defineProps } from 'vue';
+
+const props = defineProps({
+  loading: Boolean,
+});
+
+const { loading } = toRefs(props);
+const grid = [
+  [
+    { width: '48px', height: '48px' },
+    { width: '48px', height: '48px' },
+    { width: '48px', height: '48px' },
+    { width: '48px', height: '48px' },
+    { width: '48px', height: '48px' },
+  ],
+  [
+    { width: '48px', height: '16px' },
+    { width: '48px', height: '16px' },
+    { width: '48px', height: '16px' },
+    { width: '48px', height: '16px' },
+    { width: '48px', height: '16px' },
+  ],
+];
+</script>

src/skeleton/demos/image-group.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="group">
+    <t-skeleton :row-col="rowCols" class="item" :loading="loading"></t-skeleton>
+    <t-skeleton :row-col="rowCols" class="item" :loading="loading"></t-skeleton>
+  </div>
+</template>
+<script lang="ts" setup>
+import { toRefs, defineProps } from 'vue';
+
+const props = defineProps({
+  loading: Boolean,
+});
+
+const { loading } = toRefs(props);
+const rowCols = [
+  {
+    height: '171px',
+    borderRadius: '8px',
+  },
+  1,
+  {
+    width: '80%',
+  },
+  [
+    {
+      width: '60%',
+    },
+    {
+      width: '20%',
+    },
+  ],
+];
+</script>
+<style lang="less" scoped>
+.group {
+  display: flex;
+  justify-content: space-between;
+  .item {
+    width: 47%;
+  }
+}
+</style>

src/skeleton/demos/mobile.vue

@@ -2,72 +2,76 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Skeleton 骨架屏</h1>
     <p class="summary">当网络较慢时，在页面真实数据加载之前，给用户展示出页面的大致结构。</p>
-    <tdesign-demo-block title="01 类型" summary="基础">
+    <tdesign-demo-block title="01 类型"></tdesign-demo-block>
+    <tdesign-demo-block v-for="(item, index) in themeList" :key="index" :summary="item.title">
       <div class="skeleton-demo">
-        <t-skeleton />
+        <Base :theme="item.value" :loading="item.loading" />
       </div>
     </tdesign-demo-block>
-    <tdesign-demo-block summary="头像组合">
+    <tdesign-demo-block summary="宫格骨架屏">
       <div class="skeleton-demo">
-        <t-skeleton theme="avatar-text"></t-skeleton>
+        <Grid loading />
       </div>
     </tdesign-demo-block>
-    <tdesign-demo-block summary="图片组合">
-      <div class="skeleton-demo pic-compose">
-        <t-skeleton :row-col="rowCols" class="item"></t-skeleton>
-        <t-skeleton :row-col="rowCols" class="item"></t-skeleton>
+    <tdesign-demo-block summary="单元格骨架屏">
+      <div class="skeleton-demo">
+        <AvatarText loading />
+      </div>
+      <div class="skeleton-demo">
+        <PicText loading />
+      </div>
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="图片组合骨架屏">
+      <div class="skeleton-demo">
+        <ImageGroup loading />
       </div>
     </tdesign-demo-block>
     <tdesign-demo-block title="02 动画" summary="渐变加载动画">
       <div class="skeleton-demo">
-        <t-skeleton animation="gradient" />
+        <Gradient loading />
       </div>
     </tdesign-demo-block>
     <tdesign-demo-block summary="闪烁加载动画">
       <div class="skeleton-demo">
-        <t-skeleton animation="flashed" />
+        <Flashed loading />
       </div>
     </tdesign-demo-block>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import Base from './base.vue';
+import AvatarText from './avatar-text.vue';
+import PicText from './pic-text.vue';
+import ImageGroup from './image-group.vue';
+import Flashed from './flashed.vue';
+import Gradient from './gradient.vue';
+import Grid from './grid.vue';
 
-export default defineComponent({
-  setup() {
-    return {
-      rowCols: [
-        {
-          height: '171px',
-          borderRadius: '8px',
-        },
-        1,
-        {
-          width: '80%',
-        },
-        [
-          {
-            width: '60%',
-          },
-          {
-            width: '20%',
-          },
-        ],
-      ],
-    };
+const themeList = [
+  {
+    title: '头像骨架屏',
+    value: 'avatar',
+    loading: true,
   },
-});
+  {
+    title: '图片骨架屏',
+    value: 'image',
+    loading: true,
+  },
+  {
+    title: '文本骨架屏',
+    value: 'text',
+    loading: true,
+  },
+  {
+    title: '段落骨架屏',
+    value: 'paragraph',
+    loading: true,
+  },
+];
 </script>
 <style scoped lang="less">
 .skeleton-demo {
   margin: 0 16px;
 }
-
-.pic-compose {
-  display: flex;
-  justify-content: space-between;
-  .item {
-    width: 47%;
-  }
-}
 </style>

src/skeleton/demos/pic-text.vue

@@ -1,44 +1,30 @@
 <template>
-  <div class="pic-compose">
-    <t-skeleton :row-col="rowCols" class="item"></t-skeleton>
-    <t-skeleton :row-col="rowCols" class="item"></t-skeleton>
+  <div class="group">
+    <t-skeleton class="group-avatar" :row-col="rowColsImage" :loading="loading"></t-skeleton>
+    <t-skeleton class="group-content" :row-col="rowColsContent" :loading="loading"></t-skeleton>
   </div>
 </template>
+<script lang="ts" setup>
+import { toRefs, defineProps } from 'vue';
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  setup() {
-    return {
-      rowCols: [
-        {
-          height: '171px',
-          borderRadius: '8px',
-        },
-        1,
-        {
-          width: '80%',
-        },
-        [
-          {
-            width: '60%',
-          },
-          {
-            width: '20%',
-          },
-        ],
-      ],
-    };
-  },
+const props = defineProps({
+  loading: Boolean,
 });
+
+const { loading } = toRefs(props);
+const rowColsImage = [{ size: '48px', type: 'rect' }];
+const rowColsContent = [{ width: '50%' }, { width: '100%' }];
 </script>
-<style scoped lang="less">
-.pic-compose {
+<style lang="less" scoped>
+.group {
   display: flex;
-  justify-content: space-between;
-  .item {
-    width: 47%;
-  }
+}
+
+.group-avatar {
+  margin-right: 12px;
+}
+
+.group-content {
+  width: 100%;
 }
 </style>

src/skeleton/props.ts

@@ -37,15 +37,14 @@ export default {
   /** 用于设置行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距 */
   rowCol: {
     type: Array as PropType<TdSkeletonProps['rowCol']>,
-    default: [1, 1, 1, { width: '70%' }],
   },
   /** 骨架图风格，有基础、头像组合等两大类 */
   theme: {
     type: String as PropType<TdSkeletonProps['theme']>,
     default: 'text' as TdSkeletonProps['theme'],
     validator(val: TdSkeletonProps['theme']): boolean {
       if (!val) return true;
-      return ['text', 'avatar-text'].includes(val!);
+      return ['text', 'avatar', 'paragraph', 'image', 'grid'].includes(val!);
     },
   },
 };