Skip to content

Skeleton 骨架屏

在内容加载过程中显示的占位符组件,提供更好的用户体验。

引入

typescript
// 引入组件
import { Skeleton, SkeletonText, SkeletonAvatar } from '@versakit/vue'

基本用法

Skeleton组件可以在数据加载时显示占位符,减少用户等待的焦虑感。

loading

组件

Versakit提供了三个骨架屏相关组件:

  1. Skeleton - 基础骨架屏组件
  2. SkeletonText - 文本骨架屏组件
  3. SkeletonAvatar - 头像骨架屏组件

API

Skeleton Props

属性说明类型默认值
animation动画效果类型'pulse' | 'wave' | 'none''pulse'
loading是否显示骨架屏booleantrue
rounded是否为圆角booleanfalse
width自定义宽度string | number-
height自定义高度string | number-
unstyled是否使用无样式模式booleanfalse
pt传递模板样式SkeletonPT-

SkeletonText Props

属性说明类型默认值
lines显示的行数number3
widths每行宽度,可以是数组或者单个值(string | number)[] | string | number['100%', '100%', '80%']
lineHeight行高string | number'1rem'
animation动画效果类型'pulse' | 'wave' | 'none''pulse'
rounded是否为圆角booleanfalse
unstyled是否使用无样式模式booleanfalse
pt传递模板样式SkeletonTextPT-

SkeletonAvatar Props

属性说明类型默认值
size头像大小'xs' | 'sm' | 'md' | 'lg' | 'xl''md'
circle是否为圆形booleantrue
animation动画效果类型'pulse' | 'wave' | 'none''pulse'
unstyled是否使用无样式模式booleanfalse
pt传递模板样式SkeletonAvatarPT-

Skeleton 插槽

名称说明
default加载完成后显示的内容
skeleton自定义骨架屏内容

最佳实践

  1. 合理使用动画:动画可以吸引用户注意力,但过多的动画可能会分散注意力。根据实际需要选择合适的动画效果。

  2. 模拟真实内容:骨架屏应尽可能模拟实际内容的结构和布局,这样在内容加载完成后,用户不会感到突兀。

  3. 组合使用:将SkeletonSkeletonTextSkeletonAvatar组件组合使用,可以创建更复杂的加载占位符。

  4. 控制加载状态:通过loading属性控制骨架屏的显示和隐藏,当数据加载完成时,自动显示实际内容。

自定义样式

可以通过pt属性自定义组件样式,或者使用unstyled属性移除默认样式后自行添加样式。

vue
<template>
	<Skeleton :pt="{ root: 'custom-skeleton-class' }" />
	<SkeletonText
		:pt="{ root: 'custom-text-class', line: 'custom-line-class' }"
	/>
	<SkeletonAvatar :pt="{ root: 'custom-avatar-class' }" />
</template>