评分 Rate

提供评分能力。

使用

API

用法示例

基础用法

<ti-rate value="3"></ti-rate>

半星

<ti-rate value="3" allow-half></ti-rate>

只读

<ti-rate value="3" read-only></ti-rate>

可清空

<ti-rate value="3" clearable></ti-rate>

设置星级

<ti-rate value="3" count="7" clearable></ti-rate>

间距

<ti-rate value="3" ext-style="--rate-gap: 10rpx;"></ti-rate>

评星尺寸

<ti-rate value="3" icon-size="48"></ti-rate>

绑定事件

• index.html
• index.js

code

<ti-rate value="{{value}}" onchange="onChange(event)"></ti-rate>

var value = 0;
function onChange(event){
  value = event.detail?.value
}

ti-rate API

属性 Properties

属性	类型	默认值	说明
value	number	0	值
allow-half	boolean	false	允许半星
clearable	boolean	false	可清空
count	number	5	评分数量
icon	string	rate-star-highlight	评分 icon 图标
icon-size	string | number	theme.fontSize.t10	评分 icon 图标尺寸
empty-icon	string	rate-star-highlight	评分 icon 未选中图标
read-only	boolean	false	是否只读

事件 Events

名称	参数列表	描述	备注
change	(e: CustomEvent) => void	评分变化时触发该事件	-

CSS 变量 CSS Variables

CSS 变量	默认值	说明	备注
--rate-gap	theme.spacing.gap.g6	评星间距	-
--rate-color	theme.color.brand.1000	评分选中颜色	-
--rate-empty-color	theme.color.gray.background.100	评星未选中颜色	-