操作与选择Actions · 06 / 64

Rate

ui.widgets.Rate

星级或有限数量评分。Star or bounded-count ratings.

BEHAVIOR CONTRACT

支持 count、value、尺寸与只读态；hover 预览与提交值一致。count, value, size and read-only; the hover preview matches the committed value.

RECORDED INTERACTION

录像展示 5 / 10 项、只读态和三种尺寸。Shows 5 and 10 items, read-only and three sizes.

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;
}

在 GitHub 查看源码View source on GitHubexamples/storybook/stories.zig:2393

这是 Storybook 中该 story 的原样代码（zenit 5f9add5+wip 2026-09-30）。其中 W 即 ui.widgets，col / row / label 是 Storybook 内的布局小工具。The story's verbatim source from the Storybook (zenit 5f9add5+wip 2026-09-30). W is ui.widgets; col / row / label are small Storybook layout helpers.

← PREV

SliderSlider

NumberStepperNumberStepper