components/rate
Acciones · 06 / 64

Rate

ui.widgets.Rate

Valoraciones con estrellas o con un número limitado de elementos.

BEHAVIOR CONTRACT

count, value, size y solo lectura; la vista previa en hover coincide con el valor confirmado.

RECORDED INTERACTION

Muestra 5 y 10 elementos, solo lectura y tres tamaños.

examples/storybook/stories.zig:2393
// ── Rate ──
pub fn buildRate(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const c = try col(cx, 16);
    const r1 = try W.Rate(.{ .count = 5, .value = 3 }).mount(scope, cx);
    try c.appendChild(a, try label(cx, "value 3 / 5"));
    try c.appendChild(a, r1.wrapper);
    const r2 = try W.Rate(.{ .count = 5, .value = 4, .disabled = true }).mount(scope, cx);
    try c.appendChild(a, try label(cx, "readonly value 4"));
    try c.appendChild(a, r2.wrapper);

    // ── count 变体 ──
    const r3 = try W.Rate(.{ .count = 10, .value = 7 }).mount(scope, cx);
    try c.appendChild(a, try label(cx, "count 10, value 7"));
    try c.appendChild(a, r3.wrapper);

    // ── size 变体 ──
    try c.appendChild(a, try label(cx, "Sizes (16 / 24 / 36)"));
    const sizes_row = try row(cx, 24);
    inline for (.{ 16, 24, 36 }) |sz| {
        const rn = try W.Rate(.{ .count = 5, .value = 3, .size = @as(f32, sz) }).mount(scope, cx);
        try sizes_row.appendChild(a, rn.wrapper);
    }
    try c.appendChild(a, sizes_row);
    return c;
}
Ver el código en GitHubexamples/storybook/stories.zig:2393

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