Skeleton 骨架屏
Skeleton 用于展示加载状态，并预览组件的预期形状。
引入
import { Skeleton } from '@heroui/react';用法
import {Skeleton} from "@heroui/react";
export function Basic() {
return (
<div className="shadow-panel w-[250px] space-y-5 rounded-lg bg-transparent p-4">文本内容
import {Skeleton} from "@heroui/react";
export function TextContent() {
return (
<div className="w-full max-w-md space-y-3">用户资料
import {Skeleton} from "@heroui/react";
export function UserProfile() {
return (
<div className="flex items-center gap-3">列表项
import {Skeleton} from "@heroui/react";
export function List() {
return (
<div className="w-full max-w-sm space-y-4">动画类型
微光
脉冲
无
import {Skeleton} from "@heroui/react";
export function AnimationTypes() {
return (
<div className="grid w-full max-w-xl grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">网格
import {Skeleton} from "@heroui/react";
export function Grid() {
return (
<div className="grid w-full max-w-xl grid-cols-3 gap-4">单次闪烁
一种同步的闪烁效果，会一次性扫过所有骨架元素。请在父容器上应用 skeleton--shimmer 类，并将子级 Skeleton 的 animationType 设为 "none"。
import {Skeleton} from "@heroui/react";
export function SingleShimmer() {
return (
<div className="skeleton--shimmer relative grid w-full max-w-xl grid-cols-3 gap-4 overflow-hidden rounded-xl">样式
全局动画配置
你可以通过在应用中定义 --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 时，会覆盖上述全局设置。
传入 Tailwind CSS 类
import { Skeleton } from '@heroui/react';
function CustomSkeleton() {
return (
<Skeleton className="h-20 w-32 rounded-full" />
);
}自定义组件类
若要自定义 Skeleton 的组件类名，可使用 @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 */
}
}HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于定制。
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 Props
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
animationType | "shimmer" | "pulse" | "none" | "shimmer" 或 CSS 变量 | Skeleton 的动画类型；也可通过 --skeleton-animation CSS 变量进行全局配置 |
className | string | - | 额外的 CSS 类名 |
