骨架屏 Skeleton

Skeleton 组件用于展示加载中的占位效果，常用于在数据加载期间显示骨架屏。支持自定义样式、是否启用动画、是否展示头像、标题和段落等效果。

---

📦 引入方式

import { Skeleton } from '@itera-web/react-ui-skeleton';

---

🧩 使用示例

📚 头像骨架屏 和 方块骨架屏

示例

源码

<Skeleton loading avatar size={60} />
<Skeleton loading block={{ width: 180, height: 100 }} />

📚 图片骨架屏

示例

源码

<Skeleton loading image size={100} />
<Skeleton loading size={120} image={{ width: 200, height: 140 }} />

📚 显示带标题和段落的骨架屏

示例

源码

<Skeleton loading title paragraph={{ rows: 3 }} />

📚 自定义段落行数

示例

源码

<Skeleton loading paragraph={{ rows: 5 }} />

---

🧩 Props

属性	类型	默认值	说明
loading	boolean	—	是否显示骨架屏，如果为 false 则不渲染骨架内容
center	boolean	false	是否居中显示骨架屏，默认为不居中
block	object	{ width: 100, height: 100 }	块状骨架屏
image	object\boolean	false \ { width: 200, height: 140 }	图片骨架屏
size	number	40	骨架屏尺寸
avatar	boolean	false	是否显示头像骨架屏
title	boolean	false	是否显示标题骨架屏，传入 false 时不显示标题，true 时显示
paragraph	boolean | { rows: number }	false	是否显示段落骨架屏，rows 定义显示的行数
active	boolean	true	是否启用动画效果（animate-pulse），默认为启用
className	string	—	自定义样式类名

---

🖌️ 样式说明

• 骨架屏样式：使用 animate-pulse 类实现骨架屏的动画效果，表示元素在加载时有闪烁的效果。
• 头像骨架：通过设置 avatar 为 true 显示圆形头像骨架，大小为 h-12 w-12。
• 标题骨架：通过设置 title 为 true，显示一条宽度为 75% 的骨架屏条，模拟标题。
• 段落骨架：通过设置 paragraph，可以选择显示多个段落的骨架，rows 控制段落的行数，默认显示 3 行。

---

🎯 设计说明

• 动画效果：骨架屏启用 animate-pulse 类使得骨架屏有闪烁效果，提供良好的用户体验。
• 灵活性：通过属性控制是否显示头像、标题、段落，以及段落的行数，可以灵活应对不同的加载场景。
• 优化体验：如果 loading 设置为 false，组件不会渲染，避免无效的渲染操作。