JGuang

评分

Rate · Ant Design Mobile

交互预览
npm install antd-mobile@5.43.0

评分 Rate

用图形表示评分等级程度。

安装

npm install antd-mobile@5.43.0

antd-mobile 是移动网页组件库,不是 React Native 或小程序组件。React 19 项目需在入口用 unstableSetRender 注册 createRoot,否则 Toast、Dialog 等命令式 API 无法渲染;深色模式通过 <html data-prefers-color-scheme="dark"> 切换。

示例来自 Ant Design Mobile 官方仓库(MIT),固定在 npm 5.43.0 对应的提交;示例中的 DemoBlock 等展示辅助组件由 JGuang 重写,不属于 antd-mobile 的 API。

用图形表示评分等级程度。

何时使用

适用于展示事物评级以及快速打分。

示例

Rate

属性

属性说明类型默认值
allowClear是否允许再次点击后清除booleantrue
allowHalf是否允许半选booleanfalse
character自定义字符ReactNode默认的星形
countstar 总数number5
defaultValue默认值number0
onChange选择时的回调(value: number) => void-
readOnly只读,无法进行交互booleanfalse
value当前数,受控值number-

CSS 变量

属性说明默认值
--active-color填充色var(--adm-color-yellow)
--star-sizestar 大小24px
--inactive-color原始填充色var(--adm-color-border)
--inactive-color-half原始填充色(半选模式 - 左半侧)var(--adm-color-border)