Tag
ui.widgets.Tag닫을 수 있거나 읽기 전용인 분류 라벨.
BEHAVIOR CONTRACT
색상, variant, size, closable, 콜백이 일관된 크기와 포커스 시맨틱을 공유합니다.
RECORDED INTERACTION
neutral / accent / status 색상과 outline을 보여 줍니다.
// ── Tag ──
pub fn buildTag(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
const a = cx.allocator;
const c = try col(cx, 12);
// ── 全部颜色(含 info)──
const r1 = try row(cx, 8);
inline for (.{ W.TagColor.neutral, .accent, .success, .warning, .danger, .info }, .{ "neutral", "accent", "success", "warning", "danger", "info" }) |col_, t| {
try r1.appendChild(a, try W.Tag(.{ .text = t, .color = col_ }).mount(scope, cx));
}
try c.appendChild(a, try label(cx, "Colors"));
try c.appendChild(a, r1);
// ── 尺寸 ──
try c.appendChild(a, try label(cx, "Sizes (sm / md)"));
const r_sz = try row(cx, 8);
inline for (.{ W.TagSize.sm, .md }, .{ "Small", "Medium" }) |sz, t| {
try r_sz.appendChild(a, try W.Tag(.{ .text = t, .color = .accent, .size = sz }).mount(scope, cx));
}
try c.appendChild(a, r_sz);
// ── 变体 ──
try c.appendChild(a, try label(cx, "Variants"));
const r2 = try row(cx, 8);
try r2.appendChild(a, try W.Tag(.{ .text = "Default", .variant = .default }).mount(scope, cx));
try r2.appendChild(a, try W.Tag(.{ .text = "Outline", .variant = .outline }).mount(scope, cx));
try r2.appendChild(a, try W.Tag(.{ .text = "Closable", .closable = true }).mount(scope, cx));
try r2.appendChild(a, try W.Tag(.{ .text = "Outline + close", .variant = .outline, .color = .danger, .closable = true }).mount(scope, cx));
try c.appendChild(a, r2);
return c;
}Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.
TagProps
ui.widgets.Tagfn Tag(props: TagProps) TagBuilder필드
타입
기본값
설명
text[]const u8""—
variantTagVariant.default.outline.default—
colorTagColor.neutral.accent.success.warning.danger.info.neutral—
sizeTagSize.sm.md.md—
closableboolfalse—
on_close?core.HandlerRefnull—
close_icon_asset?svg_assets.Assetnull—
*Node
ui.widgets.Tagmount는 *Node을(를) 직접 반환합니다. 부모 노드에 append하면 됩니다.