基础组件

Skeleton 骨架屏

灰色闪烁占位块，在数据加载期间保持布局稳定。

安装

bash

npx polyui add skeleton

基础

通过 className 控制宽高即可匹配目标内容的形状。

tsx

import { Skeleton } from "@polyui/react/skeleton"
export function SkeletonBasic() {
  return (
    <div className="space-y-2">
      <Skeleton className="h-4 w-64" />
      <Skeleton className="h-4 w-48" />
      <Skeleton className="h-4 w-56" />
    </div>
  )
}

卡片

将多个 Skeleton 组合排列，模拟真实卡片的布局结构。

tsx

import { Skeleton } from "@polyui/react/skeleton"
export function SkeletonCard() {
  return (
    <div className="flex items-center space-x-4 p-4 border rounded-lg">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-40" />
        <Skeleton className="h-4 w-28" />
      </div>
    </div>
  )
}

个人资料

tsx

import { Skeleton } from "@polyui/react/skeleton"
export function SkeletonProfile() {
  return (
    <div className="flex items-center gap-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-40" />
        <Skeleton className="h-4 w-28" />
        <Skeleton className="h-4 w-32" />
      </div>
    </div>
  )
}

属性

属性	类型	默认值	说明
`className`	`string`	`—`	控制骨架块的宽高与圆角，如 h-4 w-32 rounded-full。