Skeleton 骨架屏
Skeleton 用于展示加载状态，并预览组件的预期形状。
用法
import { Skeleton } from '@heroui/react';示例
文本内容
用户资料
列表项
网格
单次闪烁
同步的 shimmer 效果会一次性扫过所有骨架元素。在父容器上应用 skeleton--shimmer 类，并将子骨架的 animationType 设为 "none"。
动画类型
自定义样式
Tailwind CSS
全局 CSS
若要自定义组件类，可使用 @layer components 指令。了解更多。
@layer components {
/* Base skeleton styles */
.skeleton {
@apply bg-surface-secondary/50; /* Change base background */
}
/* Shimmer animation gradient */
.skeleton--shimmer:before {
@apply viasurface; /* Change shimmer gradient color */
}
/* Pulse animation */
.skeleton--pulse {
@apply animate-pulse opacity-75; /* Customize pulse animation */
}
/* No animation variant */
.skeleton--none {
@apply opacity-50; /* Style for static skeleton */
}
}全局动画配置
可在全局 CSS 中通过 --skeleton-animation 变量为所有 Skeleton 组件设置默认动画类型：
/* 全局 CSS 文件 */
:root {
/* 可选值：shimmer、pulse、none */
--skeleton-animation: pulse;
}
/* 也可为浅色/深色主题设置不同值 */
.light, [data-theme="light"] {
--skeleton-animation: shimmer;
}
.dark, [data-theme="dark"] {
--skeleton-animation: pulse;
}在单个组件上指定 animationType 属性会覆盖此全局设置。
样式参考
HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。
全局动画配置
你可以通过在应用中定义 --skeleton-animation CSS 变量，为所有 Skeleton 设置默认动画类型：
/* In your global CSS file */
:root {
/* Possible values: shimmer, pulse, none */
--skeleton-animation: pulse;
}
/* You can also set different values for light/dark themes */
.light, [data-theme="light"] {
--skeleton-animation: shimmer;
}
.dark, [data-theme="dark"] {
--skeleton-animation: pulse;
}在单个组件上指定 animationType 时，会覆盖上述全局设置。
CSS 类
Skeleton 使用以下 CSS 类（查看源码样式）：
基础类
.skeleton - 包含背景与圆角等基础骨架样式
动画变体类
.skeleton--shimmer- 添加带渐变效果的闪烁动画（默认）.skeleton--pulse- 使用 Tailwind 的animate-pulse添加脉冲动画.skeleton--none- 无动画的静态骨架
动画
Skeleton 支持三种动画类型，视觉效果各不相同：
闪烁动画
闪烁效果会在骨架元素上移动渐变：
.skeleton--shimmer:before {
@apply animate-skeleton via-surface-3 absolute inset-0 -translate-x-full
bg-gradient-to-r from-transparent to-transparent content-[''];
}闪烁动画在主题中通过以下方式定义：
@theme inline {
--animate-skeleton: skeleton 2s linear infinite;
@keyframes skeleton {
100% {
transform: translateX(200%);
}
}
}脉冲动画
脉冲动画使用 Tailwind 内置的 animate-pulse 工具类：
.skeleton--pulse {
@apply animate-pulse;
}无动画
用于不需要任何动画的静态骨架：
.skeleton--none {
/* No animation styles applied */
}API 参考
Skeleton
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
animationType | "shimmer" | "pulse" | "none" | "shimmer" 或 CSS 变量 | Skeleton 的动画类型；也可通过 --skeleton-animation CSS 变量进行全局配置 |
className | string | - | 额外的 CSS 类名 |
