components/tag
Visualización · 19 / 64

Tag

ui.widgets.Tag

Etiquetas de categoría que se pueden cerrar o de solo lectura.

BEHAVIOR CONTRACT

El color, variant, size, closable y los callbacks comparten un tamaño y un foco coherentes.

RECORDED INTERACTION

Muestra colores neutral, accent y de estado, además de outline.

examples/storybook/stories.zig:552
// ── 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;
}
Ver el código en GitHubexamples/storybook/stories.zig:552

El código literal de la story en el Storybook (zenit 5f9add5+wip 2026-09-30). W es ui.widgets; col / row / label son pequeños helpers de layout del Storybook.

zenit · Doble licenciaGratis para proyectos de código abierto bajo GPL-3.0-only; los productos cerrados o comerciales necesitan una licencia comercial.Contacta con el autor: zongyi.xzy#gmail.com (cambia # por @)zenit 5f9add5+wip 2026-09-30