UG666

UG666 UI
@ug666/react 文档演示

Skeleton 骨架屏

Skeleton 适合在数据加载过程中提前占位，减少布局跳动。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Skeleton } from '@ug666/react'

变体预览

文本、圆形与矩形骨架。

状态展示

常见于卡片、列表和详情页加载中。

尺寸展示

通过 className 自由控制占位尺寸。

代码示例

加载卡片时建议模拟最终内容布局。

import { Skeleton } from '@ug666/react'

export function LoadingCardSkeleton() {
  return (
    <div className="space-y-3">
      <Skeleton variant="rect" className="h-40 w-full" />
      <Skeleton variant="text" className="w-2/3" />
      <Skeleton variant="text" className="w-1/2" />
    </div>
  )
}

Props 说明

属性类型默认值说明
variant'text' | 'circle' | 'rect''rect'定义骨架形态。
classNamestring—控制宽高与自定义圆角。