Tag
ui.widgets.TagÉtiquettes de catégorie fermables ou en lecture seule.
BEHAVIOR CONTRACT
Couleur, variant, size, closable et callbacks partagent un dimensionnement et un focus cohérents.
RECORDED INTERACTION
Montre les couleurs neutral, accent et de statut, ainsi qu'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;
}Le code source tel quel de la story dans le Storybook (zenit 5f9add5+wip 2026-09-30). W désigne ui.widgets ; col / row / label sont de petits helpers de mise en page du Storybook.
TagProps
ui.widgets.Tagfn Tag(props: TagProps) TagBuilderChamp
Type
Défaut
Description
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 renvoie directement *Node : ajoutez-le à un parent.