Tui

Skeleton 骨架屏

TsSkeleton 是一款轻量、灵活的骨架屏加载组件，适用于数据加载前的占位展示。组件内置动画效果，让界面在加载数据时显得更加平滑自然，提升用户体验。

基础用法

无需传入任何属性，默认渲染一个宽度 100%、高度 18px 的灰色骨架块。适合展示文字或单行内容加载占位。

示例代码

vue

<template>
  <TsSkeleton />
</template>

可以搭配组合展示

通过组合多个 Skeleton 组件，并自定义其尺寸与圆角样式，可以模拟出更复杂的布局结构，比如头像 + 文本内容、列表项、表单、卡片等页面占位。

你也可以通过设置不同的 bg 背景色来强调骨架层的区域感知。

示例代码

vue

<template>
  <TsSkeleton radius="50%" style="margin-bottom: 12px" width="48px" height="48px" />
  <TsSkeleton radius="5px" style="margin-bottom: 12px" width="100%" height="24px" />
  <TsSkeleton radius="5px" style="margin-bottom: 12px" width="100%" height="24px" />
  <TsSkeleton radius="5px" style="margin-bottom: 24px" width="450px" height="24px" />
  <TsSkeleton radius="5px" style="margin-bottom: 12px" width="100%" height="360px" />
  <TsSkeleton radius="5px" style="margin-bottom: 12px" width="100%" height="24px" />
  <TsSkeleton radius="5px" style="margin-bottom: 24px" width="450px" height="24px" />
  <TsSkeleton radius="5px" style="margin-bottom: 24px" width="450px" height="24px" />
  <TsSkeleton radius="5px" style="margin-bottom: 12px" width="100%" height="24px" />
  <TsSkeleton radius="5px" style="margin-bottom: 12px" width="100%" height="24px" />
</template>

属性 Props

width

宽度

String

100%

height

高度

String

18px

背景色

String

#E2E2E2

radius

圆角

String

var(--ts-radius)