Skeleton.tsx

基本信息

• 类型: React 组件 (shadcn/ui)
• 路径: ./src/components/ui/skeleton.tsx

功能描述

骨架屏组件，用于内容加载时的占位显示。带有脉冲动画效果。

导出内容

• Skeleton - 骨架屏组件

Props 接口

Skeleton

属性	类型	必填	默认值	说明
className	string	否	-	自定义CSS类名（控制尺寸和形状）
...props	React.ComponentProps<'div'>	否	-	div原生属性

依赖

• @/lib/utils - 工具函数 (cn)

使用示例

import { Skeleton } from "@/components/ui/skeleton";

// 基础用法
<Skeleton className="h-4 w-[250px]" />

// 卡片骨架
<div className="flex flex-col space-y-3">
  <Skeleton className="h-[125px] w-[250px] rounded-xl" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>

// 头像 + 文本骨架
<div className="flex items-center space-x-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[150px]" />
    <Skeleton className="h-4 w-[100px]" />
  </div>
</div>

// 实际使用场景
function CardDemo({ loading, data }) {
  if (loading) {
    return (
      <div className="p-4 border rounded-lg">
        <Skeleton className="h-6 w-1/2 mb-2" />
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-2/3 mt-2" />
      </div>
    );
  }
  return (
    <div className="p-4 border rounded-lg">
      <h3>{data.title}</h3>
      <p>{data.description}</p>
    </div>
  );
}