components/tag
Affichage · 19 / 64

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.

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

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