Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Rating Component

CSS-only Tailwind CSS star and heart rating component. Sizes xs–xl, half-star support, no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Derecelendirme bileşenleri, kullanıcıların ürünlere, hizmetlere veya içeriğe yıldız veya sayısal derecelendirme atayarak geri bildirimde bulunmalarına olanak tanır. Anlamsal HTML girişleri ve etkileşimli stil ile oluşturulan derecelendirmeler, kullanıcı memnuniyetini ve kaliteli geri bildirimi iletir. Frutjam derecelendirme sistemi birden fazla stili, rengi ve boyutu destekler; ürün incelemeleri, kullanıcı geri bildirim formları ve memnuniyet anketleri için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

Sınıf Tip Tanım
ratingTemelBir dizi radyo tabanlı derecelendirme girişi için kapsayıcı
rateDeğiştiriciBireysel yıldız/simge giriş öğesi
rating-halfDeğiştiriciYarım yıldız seçimini etkinleştirir
rating-xsBoyutEkstra küçük (1 rem yıldız)
rating-smBoyutKüçük (1,25rem yıldız)
rating-mdBoyutOrta (1,5 uzaklık yıldız, varsayılan)
rating-lgBoyutBüyük (2rem yıldız)
rating-xlBoyutEkstra büyük (2,5rem yıldız)
rate-primaryRenkBirincil tema rengi
rate-secondaryRenkİkincil tema rengi
rate-accentRenkVurgu teması rengi
rate-neutralRenkNötr tema rengi
rate-infoRenkBilgi anlamsal rengi
rate-successRenkBaşarı anlamsal rengi
rate-warningRenkUyarı anlamsal rengi
rate-errorRenkHata anlamsal rengi

Temel Kullanım

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>

Derecelendirme Şekilleri

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>

Yarım Derecelendirme

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>

Yalnızca Görüntülü Reklam Ağı

Son doldurulan öğede aria-checked="true" kullanın; CSS öncekilerin tümünü otomatik olarak doldurur.

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>

Derecelendirme Renkleri

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>

Derecelendirme Boyutları

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>

Salt Okunur Derecelendirmesi

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>

Etiketli Derecelendirme

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>