Rate
ui.widgets.Rate별점 또는 개수가 정해진 평가.
BEHAVIOR CONTRACT
count, value, 크기, 읽기 전용을 지원하며 hover 미리보기가 확정 값과 일치합니다.
RECORDED INTERACTION
5개와 10개 항목, 읽기 전용, 세 가지 크기를 보여 줍니다.
// ── 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;
}Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.
RateProps
ui.widgets.Ratefn Rate(props: RateProps) RateBuilder필드
타입
기본값
설명
countu85—
valuef320—
disabledboolfalse—
sizef3224—
on_change?core.HandlerRefnull—
star_icon_assetsvg_assets.Assetsvg_assets.common.star_filled星标图标。默认实心星(common.star_filled,亮/灭只靠 tint 区分); 可换成自定义 SVG(心形、描边星等)。曾经默认为 null 时退化成 "*" 文本。
RateResult
ui.widgets.Rate필드
타입
기본값
설명
wrapper*Node—
—
state*RateState—
—