Chip
ui.widgets.Chip간결한 선택지, 필터 조건, 아이콘 token.
BEHAVIOR CONTRACT
active, outline, disabled, closable과 아이콘 조합은 control shell을 재사용합니다.
RECORDED INTERACTION
상태, 크기, 아이콘 조합을 훑습니다.
// ── Chip ──
pub fn buildChip(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
const a = cx.allocator;
const icons = ui.assets.common;
const c = try col(cx, 12);
// ── 变体(含 disabled)──
try c.appendChild(a, try label(cx, "Variants"));
const r = try row(cx, 8);
try r.appendChild(a, try W.Chip(.{ .label = "Default" }).mount(scope, cx));
try r.appendChild(a, try W.Chip(.{ .label = "Active", .variant = .active }).mount(scope, cx));
try r.appendChild(a, try W.Chip(.{ .label = "Outline", .variant = .outline }).mount(scope, cx));
try r.appendChild(a, try W.Chip(.{ .label = "Disabled", .variant = .disabled }).mount(scope, cx));
try r.appendChild(a, try W.Chip(.{ .label = "Closable", .closable = true }).mount(scope, cx));
try c.appendChild(a, r);
// ── 尺寸 ──
try c.appendChild(a, try label(cx, "Sizes (xs / sm / md)"));
const r_sz = try row(cx, 8);
inline for (.{ W.ChipSize.xs, .sm, .md }, .{ "XS", "SM", "MD" }) |sz, t| {
try r_sz.appendChild(a, try W.Chip(.{ .label = t, .size = sz, .variant = .active }).mount(scope, cx));
}
try c.appendChild(a, r_sz);
// ── 带图标 ──
try c.appendChild(a, try label(cx, "With icon"));
const r_ic = try row(cx, 8);
try r_ic.appendChild(a, try W.Chip(.{ .label = "Starred", .icon_asset = icons.star }).mount(scope, cx));
try r_ic.appendChild(a, try W.Chip(.{ .label = "Folder", .icon_asset = icons.folder, .closable = true }).mount(scope, cx));
try c.appendChild(a, r_ic);
return c;
}Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.
ChipProps
ui.widgets.Chipfn Chip(props: ChipProps) ChipBuilder필드
타입
기본값
설명
label[]const u8—
—
sizeChipSize.xs.sm.md.sm—
variantChipVariant.default.active.outline.disabled.default—
icon_asset?svg_assets.Assetnull—
closableboolfalse—
readonlybooltrue—
on_click?core.HandlerRefnull—
on_close?core.HandlerRefnull—
*Node
ui.widgets.Chipmount는 *Node을(를) 직접 반환합니다. 부모 노드에 append하면 됩니다.