UG666

UG666 UI
React 组件

UGSkeleton 骨架屏

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

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx
import { UGSkeleton } from '@ug666/ui-react'

变体预览

文本、圆形与矩形骨架。

状态展示

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

尺寸展示

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

代码示例

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

tsx
import { UGSkeleton } from '@ug666/ui-react'

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

Props

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