Skeleton
ui.widgets.Skeleton内容尚未到达时的占位骨架。
BEHAVIOR CONTRACT
text / rect / circle 变体、圆角和 shimmer 使用主题化视觉。
RECORDED INTERACTION
录像展示真实 shimmer 动画。
// ── Skeleton ──
pub fn buildSkeleton(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
const a = cx.allocator;
const c = try col(cx, 12);
// 同 spinner:框到骨架图形本身,避开标题/描述文字的像素。
c.meta.ownership.meta.test_id = "story.skeleton.col";
try c.appendChild(a, try W.Skeleton(.{ .variant = .text, .width = 280, .height = 14 }).mount(scope, cx));
try c.appendChild(a, try W.Skeleton(.{ .variant = .text, .width = 200, .height = 14 }).mount(scope, cx));
try c.appendChild(a, try W.Skeleton(.{ .variant = .circular, .width = 48, .height = 48 }).mount(scope, cx));
try c.appendChild(a, try W.Skeleton(.{ .variant = .rectangular, .width = 280, .height = 80 }).mount(scope, cx));
return c;
}这是 Storybook 中该 story 的原样代码(zenit 5f9add5+wip 2026-09-30)。其中 W 即 ui.widgets,col / row / label 是 Storybook 内的布局小工具。
SkeletonProps
ui.widgets.Skeletonfn Skeleton(props: SkeletonProps) SkeletonBuilder字段
类型
默认值
说明
variantSkeletonVariant.text.circular.rectangular.text—
widthf32200—
heightf3216—
animatebooltrue—
countu81—
gapf328—
*Node
ui.widgets.Skeletonmount 直接返回 *Node,把它 append 到父节点即可。