---
url: /components/skeleton.md
---
# Skeleton 骨架屏

在内容加载完成前提供占位图形，减少布局闪动。`loading` 为 true 时渲染占位，false 时切换渲染默认插槽的真实内容；`throttle` 可延迟占位渲染，避免快速加载完成时的闪烁。也可脱离 eb-skeleton 单独使用各形态占位单元。

## 基础用法

默认按 `rows` 渲染多行段落占位（末行自动短一截），`animated` 开启扫光动画。

## 常用版式预设 preset

不想手工拼装占位单元时，直接选一个 `preset`：`article`（标题 + 段落）、`avatar-text`（头像 + 两行）、`card`（封面 + 标题摘要）、`table`（表头 + 数据行，行数列数可调）、`profile`（大头像 + 署名）。

## 多块与渲染延迟

`count` 渲染多个占位块（如列表多卡片场景）；`throttle` 延迟毫秒数后才渲染占位，快速返回的请求不会闪出骨架屏。

## 动态切换加载态

`loading` 置为 false 时渲染默认插槽中的真实内容，与占位结构保持一致可避免跳动。

## 组合占位单元

直接使用 `eb-skeleton-item`（variant 可选 text / p / caption / h1 / h3 / h5 / circle / rect / image / button / avatar）及 `eb-skeleton-avatar`、`eb-skeleton-button`、`eb-skeleton-input`、`eb-skeleton-image` 快捷组件拼装任意占位结构。

## template 插槽自定义占位块

`#template` 插槽替换每块的默认段落占位（插槽内容按 `count` 次重复渲染），可自由组合占位单元。

## API