跳转到主内容
Frutjam logo Frutjam
v2.2.5
Theme

评级成分

最后更新:

仅 CSS Tailwind CSS 星级和心率组件。尺寸 xs-xl，半星支持，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

评级组件允许用户通过为产品、服务或内容分配星级或数字评级来提供反馈。评级采用语义 HTML 输入和交互式样式构建，可传达用户满意度和质量反馈。 Frutjam 评级系统支持多种样式、颜色和尺寸，非常适合产品评论、用户反馈表和满意度调查。

仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

班级 类型 描述
rating根据一组基于无线电的评级输入的容器
rate修饰符单独的星号/图标输入元素
rating-half修饰符启用半星选择
rating-xs尺寸特小号（1rem 星星）
rating-sm尺寸小（1.25rem 星星）
rating-md尺寸中（1.5rem 星，默认）
rating-lg尺寸大（2雷姆星）
rating-xl尺寸超大号（2.5rem 星星）
rate-primary颜色主要主题颜色
rate-secondary颜色次要主题色
rate-accent颜色强调主题颜色
rate-neutral颜色中性主题色
rate-info颜色信息语义颜色
rate-success颜色成功语义色
rate-warning颜色警告语义颜色
rate-error颜色错误语义颜色

基本用法

1
2
3
4
5
6
7
<div class="rating">
  <input type="radio" name="rating" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rating" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rating" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rating" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rating" class="rate mask mask-star rate-warning" value="5">
</div>

1
2
3
4
5
6
7
<div className="rating">
  <input type="radio" name="rating" className="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rating" className="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rating" className="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rating" className="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rating" className="rate mask mask-star rate-warning" value="5">
</div>

评级形状

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<div class="rating">
  <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating">
  <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="1">
  <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="2">
  <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="3" checked>
  <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="4">
  <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="5">
</div>

<div class="rating">
  <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="1">
  <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="2">
  <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="3">
  <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="4" checked>
  <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="5">
</div>

<div class="rating">
  <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="1">
  <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="2">
  <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="3" checked>
  <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="4">
  <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="5">
</div>

<div class="rating">
  <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="1">
  <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="2">
  <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="3" checked>
  <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="4">
  <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="5">
</div>

<div class="rating">
  <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="1">
  <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="2">
  <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="3" checked>
  <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="4">
  <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="5">
</div>

<div class="rating">
  <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="1">
  <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="2">
  <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="3" checked>
  <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="4">
  <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="5">
</div>

半评级

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="rating rating-half">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="0.5">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="1.5">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="2.5" checked>
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="3">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="3.5">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="4.5">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating rating-half">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="0.5">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="1">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="1.5">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="2">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="2.5">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="3" checked>
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="3.5">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="4">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="4.5">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="5">
</div>

<div class="rating rating-half">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="0.5">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="1">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="1.5">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="2">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="2.5" checked>
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="3">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="3.5">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="4">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="4.5">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="5">
</div>

仅显示

在最后填充的项目上使用 aria-checked="true" — CSS 会自动填充所有先前的项目。

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="rating" aria-label="3 out of 5 stars">
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="true"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
</div>

<div class="rating" aria-label="4 out of 5 hearts">
  <div class="rate mask mask-heart rate-error" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-heart rate-error" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-heart rate-error" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-heart rate-error" role="radio" aria-checked="true"></div>
  <div class="rate mask mask-heart rate-error" role="radio" aria-checked="false"></div>
</div>

<div class="rating rating-half" aria-label="2.5 out of 5 stars">
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="true"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
</div>

评级颜色

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<div class="rating">
  <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="1">
  <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="2">
  <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="3">
  <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="4" checked>
  <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="1">
  <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="2">
  <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="3" checked>
  <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="4">
  <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="1">
  <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="2">
  <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="3" checked>
  <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="4">
  <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="1">
  <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="2">
  <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="3" checked>
  <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="4">
  <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="1">
  <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="2">
  <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="3" checked>
  <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="4">
  <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="1">
  <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="2">
  <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="3" checked>
  <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="4">
  <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="1">
  <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="2">
  <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="3" checked>
  <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="4">
  <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="5">
</div>

评级大小

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="rating rating-xs">
  <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating rating-sm">
  <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating rating-md">
  <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating rating-lg">
  <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating rating-xl">
  <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="5">
</div>

只读评级

5 out of 5
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="flex gap-2 items-center">
  <div class="rating rating-sm" aria-label="5 out of 5 stars">
    <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
    <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
    <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
    <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
    <div class="rate mask mask-star rate-warning" role="radio" aria-checked="true"></div>
  </div>
  <span class="text-sm">5 out of 5</span>
</div>

带有标签的评级

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<label>
  <span class="block text-sm font-medium mb-2">Rate your experience</span>
  <div class="rating">
    <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="1">
    <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="2">
    <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="3">
    <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="4">
    <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="5">
  </div>
</label>

使用 Claude Code、Cursor 或其他 AI 编辑器？

Cherry MCP 为您的 AI 编辑器按需提供准确的 等级 类名称和结构。不再有幻觉课程。

尝试Cherry MCP