Skip to content
On this page

Skeleton 骨架屏

在数据完整加载之前显示的占位骨架

基本使用

最简单的占位使用。

开启

多行骨架屏

rows 可以配置多行效果

开启

动画效果

animated 可以配置动画效果

开启

不同尺寸

size 属性可以配置不同大小

开启

差异的

difference 属性可以配在 rows 大于 3 的时候,第一个和最后一个会产生差异长度

开启

搭配组件使用

  • 这是一段文字
  • 这是一段文字
开启

Attributes

参数说明类型可选值默认值
round是否带圆角的boolean——false
animated是否展示波浪动画boolean——false
rows渲染多行占位图number——1
difference首位是否有长度差异boolean——false
row-gap自定义间距尺寸number / string————
loading为 true 时,显示占位图。false 展示子组件boolean——false
size自定义尺寸FightingSizelarge middle small minimiddle

Slots

名称说明
defaultloading 结束待渲染组件

Interface

组件导出以下类型定义:

ts
import type { SkeletonInstance, SkeletonProps } from 'fighting-design'

Contributors