Skip to main content

骨架屏 Skeleton

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

📦 引入方式​

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

🧩 使用示例​

📚 显示带头像的骨架屏​

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

📚 自定义段落行数​

🧩 Props​

属性类型默认值说明
loadingboolean—是否显示骨架屏，如果为 false 则不渲染骨架内容
centerbooleanfalse是否居中显示骨架屏，默认为不居中
avatarbooleanfalse是否显示头像骨架屏
titlebooleanfalse是否显示标题骨架屏，传入 false 时不显示标题，true 时显示
paragraphboolean | { rows: number }false是否显示段落骨架屏，rows 定义显示的行数
activebooleantrue是否启用动画效果（animate-pulse），默认为启用
classNamestring—自定义样式类名

🖌️ 样式说明​

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

🎯 设计说明​

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