介绍

在内容加载过程中提供一组占位图形，通常图形会描述内容的概要排版。

引入

import Skeleton from 'sard-uniapp/components/skeleton/skeleton.vue'
import SkeletonBlock from 'sard-uniapp/components/skeleton-block/skeleton-block.vue'
import SkeletonAvatar from 'sard-uniapp/components/skeleton-avatar/skeleton-avatar.vue'
import SkeletonTitle from 'sard-uniapp/components/skeleton-title/skeleton-title.vue'
import SkeletonParagraph from 'sard-uniapp/components/skeleton-paragraph/skeleton-paragraph.vue'

代码演示

基础使用

默认展示三行占位元素。

<template>
  <sar-skeleton />
</template>

显示标题

设置 title 属性显示标题占位元素。

<template>
  <sar-skeleton title />
</template>

显示头像

设置 avatar 属性显示头像占位元素。

<template>
  <sar-skeleton avatar title />
</template>

圆形头像

设置 avatarRound 属性显示头圆形像占位元素。

<template>
  <sar-skeleton avatar avatar-round title />
</template>

圆角标题和段落

设置 round 属性显示圆角标题和段落。

<template>
  <sar-skeleton avatar title round />
</template>

动画效果

设置 animated 属性显示动画效果。

<template>
  <sar-skeleton avatar title animated />
</template>

包含子组件

将 loading 属性设置成 false 表示内容加载完成，此时会隐藏占位图。

vue lang="ts"

<template>
  <sar-switch v-model="loading" root-style="margin-bottom: 20rpx;" />

  <sar-skeleton avatar title animated :loading="loading">
    <view style="display: flex; gap: 30rpx">
      <sar-icon name="person" size="64rpx" />
      <view style="flex: 1">
        <view style="font-size: var(--sar-text-lg); margin-bottom: 20rpx">
          我是一个标题
        </view>
        <view>
          我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落
        </view>
      </view>
    </view>
  </sar-skeleton>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)
</script>

vue lang="js"

<template>
  <sar-switch v-model="loading" root-style="margin-bottom: 20rpx;" />

  <sar-skeleton avatar title animated :loading="loading">
    <view style="display: flex; gap: 30rpx">
      <sar-icon name="person" size="64rpx" />
      <view style="flex: 1">
        <view style="font-size: var(--sar-text-lg); margin-bottom: 20rpx">
          我是一个标题
        </view>
        <view>
          我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落
        </view>
      </view>
    </view>
  </sar-skeleton>
</template>

<script setup lang="js">
import { ref } from "vue";
const loading = ref(false);
</script>

自定义

可以通过 SkeletonBlock、SkeletonAvatar、SkeletonTitle、SkeletonParagraph 自由组合使用。

<template>
  <sar-row gap="20rpx" root-style="row-gap: 30rpx">
    <sar-col v-for="i in 8" :key="i" :span="3">
      <view
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          row-gap: 16rpx;
        "
      >
        <sar-skeleton-block height="120rpx" animated />
        <sar-skeleton-block animated />
      </view>
    </sar-col>
  </sar-row>

  <view style="display: flex; gap: 40rpx; margin-top: 60rpx">
    <sar-skeleton-block width="100px" height="80px" animated />
    <view style="display: flex; flex-direction: column; flex: 1">
      <sar-skeleton-paragraph :rows="2" animated />
      <sar-skeleton-block
        width="120rpx"
        height="60rpx"
        root-style="margin-left: auto; margin-top: auto"
        animated
      />
    </view>
  </view>
</template>

API

SkeletonProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
rows	段落行数	number	3
title	是否显示标题	boolean	false
avatar	是否显示头像	boolean	false
avatar-size	头像尺寸	number | string	-
avatar-round	是否显示圆形头像	boolean	true
round	是否将标题和段落显示为圆角风格	boolean	false
loading	是否显示骨架屏，传 false 时会展示子组件内容	boolean	true
animated	是否开启动画	boolean	false

SkeletonBlockProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
animated	是否开启动画	boolean	false
round	是否显示为圆角风格	boolean	false
width	设置宽度	string	-
height	设置高度	string	-

SkeletonAvatarProps

继承 SkeletonBlockProps 并有以下额外属性。

属性	描述	类型	默认值
size	头像尺寸	string	-

SkeletonTitleProps

继承 SkeletonBlockProps 并有以下额外属性。

SkeletonParagraphProps

继承 SkeletonBlockProps 并有以下额外属性。

属性	描述	类型	默认值
rows	段落行数	number	3

主题定制

CSS 变量

page,
.sar-portal {
  --sar-skeleton-bg: var(--sar-secondary-bg);
  --sar-skeleton-border-radius: var(--sar-rounded-sm);
  --sar-skeleton-highlight-color: rgba(0, 0, 0, 0.08);

  --sar-skeleton-block-height: 32rpx;

  --sar-skeleton-avatar-size: 64rpx;
  --sar-skeleton-avatar-margin-right: 32rpx;

  --sar-skeleton-title-width: 40%;
  --sar-skeleton-title-height: 40rpx;
  --sar-skeleton-title-margin-bottom: 32rpx;

  --sar-skeleton-row-last-width: 60%;
  --sar-skeleton-row-gap: 24rpx;
}

CSS 变量 - 暗黑模式

@include theme-dark {
  --sar-skeleton-highlight-color: rgba(255, 255, 255, 0.15);
}