Rate
评分
Rate · 默认样式(星星)
5 颗星星,未点亮 G10,点亮 Y60,点击星星切换评分
1 星 · 极差
2 星 · 较差
3 星 · 中等
4 星 · 满意
5 星 · 非常满意
Rate · 自定义样式(表情)
5 个表情,未点亮为一般(嘴不笑),点亮为大笑,点击表情切换评分
1 个 · 极差
2 个 · 较差
3 个 · 中等
4 个 · 满意
5 个 · 非常满意
属性值Token
默认样式 — 星星
星星数量5rate_count
星星尺寸24×24px--rate-star-size
星星间距8px--rate-gap
未点亮颜色#E9ECF2 G10--rate-unlit-color → --G10
点亮颜色#FFAA00 Y60--rate-lit-color → --Y60
自定义样式 — 表情
表情数量5rate_count
表情尺寸36×36px--rate-face-size
表情间距8px--rate-gap
未点亮背景#E9ECF2 G10--rate-unlit-color → --G10
点亮背景#FFAA00 Y60--rate-lit-color → --Y60
未点亮眼睛/嘴#A8B4C8 G40--G40
点亮眼睛/嘴#FFFFFF G0--G0
未点亮嘴形直线(不笑)neutral_mouth
点亮嘴形弧线大笑smile_mouth
评分含义
1 星 / 1 个极差rating_1
2 星 / 2 个较差rating_2
3 星 / 3 个中等rating_3
4 星 / 4 个满意rating_4
5 星 / 5 个非常满意rating_5
交互
点击星星点亮该星星及之前所有星星click_to_rate
点击表情点亮该表情及之前所有表情click_to_rate
Hover 效果图标轻微放大 scale(1.1)hover_scale
动画
图标 Hover0.12s easetransition
返回组件首页