Skeleton

内容加载期间的占位图形：暗灰色的形状，一道淡淡的光带沿斜切方向从表面掠过。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/skeleton

示例

加载中的卡片

skeleton-card.tsx

import { Skeleton, SkeletonText } from "@/components/zero/skeleton";export default function SkeletonCard() {  return (    <div className="grid w-full max-w-md grid-cols-[5rem_1fr] gap-4">      <Skeleton className="size-20" />      <div className="grid content-start gap-4">        <SkeletonText lines={2} />        <Skeleton shape="slab" />      </div>    </div>  );}

行为

共有三种形状：矩形块，用于图片与卡片；线条，代表一行文字，像斜切块一样两端斜切；以及控件大小的斜切块。每种形状的尺寸按它所替代的内容设定；SkeletonText 堆叠多行线条，最后一行较短。

骨架屏对辅助技术隐藏，正在加载的区域应标注 aria-busy。系统开启「减少动态效果」时光带保持静止。

属性

Skeleton

属性	类型	默认值	说明
shape	"block" \| "line" \| "slab"	"block"	矩形块、代表一行文字的倾斜细线条，或控件大小的斜切块。

SkeletonText

属性	类型	默认值	说明
lines	number	3	行数。