Yalnızca CSS'ye özgü Tailwind CSS yıldızı ve kalp derecelendirme bileşeni. Boyutlar xs-xl, yarım yıldız desteği, JavaScript gerekmez. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
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 |
|---|---|---|
| rating | Temel | Bir dizi radyo tabanlı derecelendirme girişi için kapsayıcı |
| rate | Değiştirici | Bireysel yıldız/simge giriş öğesi |
| rating-half | Değiştirici | Yarım yıldız seçimini etkinleştirir |
| rating-xs | Boyut | Ekstra küçük (1 rem yıldız) |
| rating-sm | Boyut | Küçük (1,25rem yıldız) |
| rating-md | Boyut | Orta (1,5 uzaklık yıldız, varsayılan) |
| rating-lg | Boyut | Büyük (2rem yıldız) |
| rating-xl | Boyut | Ekstra büyük (2,5rem yıldız) |
| rate-primary | Renk | Birincil tema rengi |
| rate-secondary | Renk | İkincil tema rengi |
| rate-accent | Renk | Vurgu teması rengi |
| rate-neutral | Renk | Nötr tema rengi |
| rate-info | Renk | Bilgi anlamsal rengi |
| rate-success | Renk | Başarı anlamsal rengi |
| rate-warning | Renk | Uyarı anlamsal rengi |
| rate-error | Renk | Hata 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
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> |
Claude Code, Cursor veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?
Cherry MCP, AI editörünüze talep üzerine tam Derecelendirme sınıf adlarını ve yapısını verir. Artık halüsinasyonlu dersler yok.