components/chip
数据展示 · 20 / 64

Chip

ui.widgets.Chip

紧凑选择、筛选条件或带图标 token。

BEHAVIOR CONTRACT

active、outline、disabled、closable 与图标组合复用 control shell。

RECORDED INTERACTION

录像扫过状态、尺寸和 icon 组合。

examples/storybook/stories.zig:584
// ── 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;
}
在 GitHub 查看源码examples/storybook/stories.zig:584

这是 Storybook 中该 story 的原样代码(zenit 5f9add5+wip 2026-09-30)。其中 W 即 ui.widgets,col / row / label 是 Storybook 内的布局小工具。

zenit · 双授权开源项目可按 GPL-3.0-only 免费使用;闭源或商业产品需要商业授权。可联系作者:zongyi.xzy#gmail.com(# 换成 @)zenit 5f9add5+wip 2026-09-30