Icons
ui.system_iconsRôles d'icônes sémantiques, tailles et teintes indépendants du fournisseur.
BEHAVIOR CONTRACT
Les composants ne dépendent que des rôles system_icons ; changer de fournisseur d'icônes ne modifie aucune API de composant.
RECORDED INTERACTION
Le curseur virtuel parcourt rôles, tailles et teintes.
pub fn buildIconGallery(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
const a = cx.allocator;
const c = try col(cx, 12);
try c.appendChild(a, try label(cx, "System icon contract (provider-neutral subset)"));
// wrap 成多行网格:每行 6 个。
var current_row = try row(cx, 8);
var in_row: usize = 0;
inline for (GALLERY_ICONS) |spec| {
if (in_row == 6) {
try c.appendChild(a, current_row);
current_row = try row(cx, 8);
in_row = 0;
}
try current_row.appendChild(a, try iconCell(scope, cx, spec.asset, spec.name));
in_row += 1;
}
try c.appendChild(a, current_row);
// 尺寸 + tint 演示行
try c.appendChild(a, try label(cx, "Sizes & tints"));
const demo = try row(cx, 16);
inline for (.{ 16, 24, 32, 48 }) |sz| {
try demo.appendChild(a, try ui.iconTint(cx, ui.system_icons.alert, light.color.fg_secondary, .{
.width = .{ .px = @as(f32, sz) },
.height = .{ .px = @as(f32, sz) },
}));
}
try demo.appendChild(a, try ui.iconTint(cx, ui.system_icons.heart, .{ .r = 220, .g = 40, .b = 60, .a = 255 }, .{
.width = .{ .px = 32 },
.height = .{ .px = 32 },
}));
try c.appendChild(a, demo);
return c;
}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.