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하면 됩니다.