Badge
ui.widgets.Badge낮은 강조의 상태, 개수, 시맨틱 색상 라벨.
BEHAVIOR CONTRACT
info / success / warning / error, 크기, dot, 아이콘 변형이 테마 token을 따릅니다.
RECORDED INTERACTION
모든 시맨틱 색상과 크기를 훑습니다.
// ── Badge / StatusBadge ──
pub fn buildBadge(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
const a = cx.allocator;
const c = try col(cx, 12);
const r1 = try row(cx, 12);
inline for (.{ "info", "success", "warning", "error" }, .{ W.badge.BadgeStatus.info, .success, .warning, .@"error" }) |t, st| {
try r1.appendChild(a, try W.Badge(.{ .text = t, .status = st }).mount(scope, cx));
}
try c.appendChild(a, try label(cx, "Badge status"));
try c.appendChild(a, r1);
const r2 = try row(cx, 12);
try r2.appendChild(a, try W.Badge(.{ .count = 5 }).mount(scope, cx));
try r2.appendChild(a, try W.Badge(.{ .count = 120, .max_count = 99 }).mount(scope, cx));
try r2.appendChild(a, try W.Badge(.{ .dot = true }).mount(scope, cx));
try c.appendChild(a, try label(cx, "Count / dot"));
try c.appendChild(a, r2);
// ── 尺寸 ──
try c.appendChild(a, try label(cx, "Sizes (sm / md)"));
const r_sz = try row(cx, 12);
inline for (.{ W.badge.BadgeSize.sm, .md }) |sz| {
try r_sz.appendChild(a, try W.Badge(.{ .count = 8, .size = sz }).mount(scope, cx));
}
try c.appendChild(a, r_sz);
const r3 = try row(cx, 12);
try r3.appendChild(a, try W.StatusBadge(.{ .label_text = "Online", .status = .success }).mount(scope, cx));
try r3.appendChild(a, try W.StatusBadge(.{ .label_text = "Error", .status = .@"error" }).mount(scope, cx));
try c.appendChild(a, try label(cx, "StatusBadge"));
try c.appendChild(a, r3);
return c;
}Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.
BadgeProps
ui.widgets.Badgefn Badge(props: BadgeProps) BadgeBuilder필드
타입
기본값
설명
text?[]const u8null显示文本
count?u32null数字计数
max_countu3299最大显示数
statusBadgeStatus.info.success.warning.@"error".info状态
sizeBadgeSize.sm.md.md尺寸
dotboolfalse点状模式(只显示点,不显示内容)
StatusBadgeProps
ui.widgets.StatusBadgefn StatusBadge(props: StatusBadgeProps) StatusBadgeBuilder필드
타입
기본값
설명
statusBadgeStatus.info.success.warning.@"error".info—
label_text?[]const u8null—
*Node
ui.widgets.Badgemount는 *Node을(를) 직접 반환합니다. 부모 노드에 append하면 됩니다.
*Node
ui.widgets.StatusBadgemount는 *Node을(를) 직접 반환합니다. 부모 노드에 append하면 됩니다.