Taroify

Rate 评分

用于对事物进行评级操作。

import { Rate } from "@taroify/core"

代码演示

通过 value 来绑定当前评分值。

<Rate value={3} />

通过 fullIcon 属性设置选中时的图标，voidIcon 属性设置未选中时的图标。

<Rate defaultValue={3} icon={<Like />} emptyIcon={<LikeOutlined />} />

通过 size 属性设置图标大小，css 设置选中时的颜色，emptyIcon 设置未选中时的颜色。

 <Rate className="custom-color" defaultValue={3} allowHalf size={25} emptyIcon={<Star />} />

.custom-color {
  --rate-icon-empty-color: #eee;
  --rate-icon-full-color: #ffd21e;
}

设置 allowHalf 属性后可以选中半星。

<Rate defaultValue={3} allowHalf />

通过 count 属性设置评分总数。

<Rate defaultValue={3} count={6} />

通过 disabled 属性来禁用评分。

<Rate defaultValue={3} disabled />

通过 readonly 属性将评分设置为只读状态。

<Rate defaultValue={3} readonly />

设置 readonly 和 allowHalf 属性后，Rate 组件可以展示任意小数结果。

<Rate defaultValue={3.3} readonly allowHalf />

事件名	说明	回调参数
onChange	当前分值变化时触发的事件	value :number

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。