评分

评分组件是一个基于星级的选择输入。

导入#


import { Rating } from 'primereact/rating';

基本用法#

评分组件用作受控输入组件，具有 value 和 onChange 属性。


<Rating value={value} onChange={(e) => setValue(e.value)} />

无取消按钮#

默认情况下会显示一个取消图标来重置值，将 cancel 设置为 false 可删除此选项。


<Rating value={value} onChange={(e) => setValue(e.value)} cancel={false} />

星星数量#

要显示的星星数量由 stars 属性定义。


<Rating value={value} onChange={(e) => setValue(e.value)} stars={10} />

模板#

自定义图标用于覆盖默认图标，通过 onIcon、offIcon 和 cancelIcon 属性实现。


<Rating value={value} onChange={(e) => setValue(e.value)}
    cancelIcon={<img src="/images/rating/cancel.png" alt="custom-cancel-image" width="25px" height="25px" />}
    onIcon={<img src="/images/rating/custom-icon-active.png" alt="custom-image-active" width="25px" height="25px" />}
    offIcon={<img src="/images/rating/custom-icon.png" alt="custom-image" width="25px" height="25px" />}
/>

只读#

当存在 readOnly 时，值无法编辑。


<Rating value={5} readOnly cancel={false} />

禁用#

当存在 disabled 时，会应用视觉提示以指示无法与旋钮进行交互。


<Rating value={5} disabled cancel={false} />

可访问性#

屏幕阅读器

评分组件内部使用仅对屏幕阅读器可见的单选按钮。读取项目的值是从 locale API 通过 aria 的 star 和 stars 获取的。属性。

键盘支持

键盘交互源自浏览器对组中单选按钮的本机处理。

按键	功能
tab	将焦点移动到表示值的星星，如果不存在，则第一个星星接收焦点。
左箭头上箭头	将焦点移动到上一个星星，如果不存在，则最后一个单选按钮接收焦点。
右箭头下箭头	将焦点移动到下一个星星，如果不存在，则第一个星星接收焦点。
空格	如果聚焦的星星不代表该值，则将值更改为星星的值。