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 />

API

Props

参数	说明	类型	默认值
defaultValue	默认当前分值	number	-
value	当前分值	number	-
count	图标总数	number \| string	`5`
size	图标大小，默认单位为`px`	number \| string	`20px`
gutter	图标间距，默认单位为`px`	number \| string	`4px`
icon	选中时的图标	string	`<Star />`
emptyIcon	未选中时的图标	string	`<StarOutlined />`
allowHalf	是否允许半选	boolean	`false`
readonly	是否为只读状态，只读状态下无法修改评分	boolean	`false`
disabled	是否禁用评分	boolean	`false`
touchable	是否可以通过滑动手势选择评分	boolean	`true`

Events

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

主题定制

样式变量

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

名称	默认值	描述
rate-icon-size	20px $hd*	-
rate-icon-gutter	var(--padding-base)	-
rate-icon-empty-color	var(--gray-5)	-
rate-icon-full-color	var(--danger-color)	-
rate-icon-disabled-color	var(--gray-5)	-

#Rate 评分

#介绍

#引入

#代码演示

#基础用法

#自定义图标

#自定义样式

#半星

#自定义数量

#禁用状态

#只读状态

#只读状态显示小数

#API

#Props

#Events

#主题定制

#样式变量