介绍

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

代码演示

基础使用

默认展示三行占位元素。

<template>
  <s-skeleton />
</template>

显示标题

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

<template>
  <s-skeleton title />
</template>

显示头像

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

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

圆形头像

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

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

圆角标题和段落

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

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

动画效果

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

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

包含子组件

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

vue ts

<template>
  <s-switch v-model="loading" style="margin-bottom: 10px" />

  <s-skeleton avatar title animated :loading="loading">
    <div style="display: flex; gap: 15px">
      <demo-icon name="person" size="32px" />
      <div style="flex: 1">
        <div style="font-size: var(--s-font-size-lg); margin-bottom: 10px">我是一个标题</div>
        <div>
          我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落
        </div>
      </div>
    </div>
  </s-skeleton>
</template>

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

const loading = ref(false)
</script>

vue js

<template>
  <s-switch v-model="loading" style="margin-bottom: 10px" />

  <s-skeleton avatar title animated :loading="loading">
    <div style="display: flex; gap: 15px">
      <demo-icon name="person" size="32px" />
      <div style="flex: 1">
        <div style="font-size: var(--s-font-size-lg); margin-bottom: 10px">我是一个标题</div>
        <div>
          我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落
        </div>
      </div>
    </div>
  </s-skeleton>
</template>

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

自定义

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

<template>
  <s-flex vertical gap="30px">
    <s-grid :columns="4" gap="15px">
      <s-grid-item v-for="i in 8" :key="i">
        <s-flex vertical gap="8px">
          <s-skeleton-block height="60px" animated />
          <s-skeleton-block animated />
        </s-flex>
      </s-grid-item>
    </s-grid>

    <s-flex gap="20px">
      <s-skeleton-block width="100px" height="80px" animated />
      <s-flex flex="1" vertical>
        <s-skeleton-paragraph :rows="2" animated />
        <s-skeleton-block width="60px" height="30px" class="ms-auto mt-auto" animated />
      </s-flex>
    </s-flex>
  </s-flex>
</template>

API

SkeletonProps

属性	描述	类型	默认值
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

属性	描述	类型	默认值
animated	是否开启动画	boolean	false
round	是否显示为圆角风格	boolean	false
width	设置宽度	string	-
height	设置高度	string	-

SkeletonAvatarProps

继承 SkeletonBlockProps 。

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

SkeletonTitleProps

继承 SkeletonBlockProps 。

SkeletonParagraphProps

继承 SkeletonBlockProps 。

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

主题定制

样式变量

CSS 变量	值
--s-skeleton-bg	var(--s-fill-color-secondary)
--s-skeleton-border-radius	var(--s-border-radius-sm)
--s-skeleton-highlight-color	rgba(0, 0, 0, 0.08)
--s-skeleton-block-height	var(--s-size)
--s-skeleton-avatar-size	var(--s-size-2xl)
--s-skeleton-avatar-margin-end	var(--s-size)
--s-skeleton-title-width	40%
--s-skeleton-title-height	var(--s-size-lg)
--s-skeleton-title-margin-bottom	var(--s-size)
--s-skeleton-row-last-width	60%
--s-skeleton-row-gap	var(--s-size-sm)