English
中文

自 1.0.0BETA

Skeleton 骨架屏

加载占位与结构提示

Skeleton 骨架屏

加载中结构提示，避免内容跳动。
状态：Beta

Demo

Skeleton

文本与头像混合占位

示例即将加载...

<template>
  <TxSkeleton :loading="true" :lines="3" />
  <TxSkeleton variant="circle" :width="40" :height="40" />
</template>

API（简版）

属性名	类型	默认值	说明
loading			是否显示骨架
lines			文本行数
variant	textrectcircle		形态
width			宽度，number 会转换为 px
height			高度，number 会转换为 px
gap			多行间距，number 会转换为 px

交互契约

loading=false 时不渲染骨架，直接渲染默认 slot。
lines 最小渲染 1 行，避免空骨架。
variant="circle" 固定使用圆形半径，忽略 radius。

组合示例

卡片占位

骨架屏配合卡片承载列表。

示例即将加载...

<template>
  <TxCard>
    <TxSkeleton :loading="true" :lines="2" />
  </TxCard>
</template>

Dev

上一章Select 选择器下一章 Slider 滑块