components/chip
Affichage · 20 / 64

Chip

ui.widgets.Chip

Choix compacts, filtres ou tokens avec icône.

BEHAVIOR CONTRACT

active, outline, disabled, closable et les icônes réutilisent le control shell.

RECORDED INTERACTION

Parcourt les états, tailles et combinaisons d'icônes.

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;
}
Voir le code sur GitHubexamples/storybook/stories.zig:584

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.

zenit · Double licenceGratuit pour les projets open source sous GPL-3.0-only ; les produits propriétaires ou commerciaux nécessitent une licence commerciale.Contacter l’auteur : zongyi.xzy#gmail.com (remplacez # par @)zenit 5f9add5+wip 2026-09-30