Komponent gwiazdek i ocen serca w Tailwind CSS wyłącznie dla CSS. Rozmiary xs-xl, obsługa półgwiazdkowa, nie wymaga JavaScript. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Komponenty ocen pozwalają użytkownikom przekazywać opinie poprzez przypisywanie gwiazdek lub ocen liczbowych produktom, usługom lub treściom. Oceny, zbudowane na podstawie semantycznych danych wejściowych HTML i interaktywnej stylistyki, wyrażają zadowolenie użytkowników i opinie dotyczące jakości. System ocen Frutjam obsługuje wiele stylów, kolorów i rozmiarów — idealnie nadaje się do recenzji produktów, formularzy opinii użytkowników i ankiet satysfakcji.
Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
| Klasa | Typ | Opis |
|---|---|---|
| rating | Opierać | Kontener na zestaw radiowych danych wejściowych oceny |
| rate | Modyfikator | Indywidualny element wejściowy w postaci gwiazdki/ikony |
| rating-half | Modyfikator | Umożliwia wybór półgwiazdkowy |
| rating-xs | Rozmiar | Bardzo małe (gwiazdki 1rem) |
| rating-sm | Rozmiar | Mały (gwiazdki 1,25 REM) |
| rating-md | Rozmiar | Średni (gwiazdki 1,5 rem, domyślnie) |
| rating-lg | Rozmiar | Duży (2rem gwiazdki) |
| rating-xl | Rozmiar | Bardzo duży (gwiazdki 2,5 rem) |
| rate-primary | Kolor | Podstawowy kolor motywu |
| rate-secondary | Kolor | Kolor motywu drugorzędnego |
| rate-accent | Kolor | Kolor motywu akcentującego |
| rate-neutral | Kolor | Neutralny kolor motywu |
| rate-info | Kolor | Kolor semantyczny informacji |
| rate-success | Kolor | Sukces semantyczny kolor |
| rate-warning | Kolor | Ostrzeżenie kolor semantyczny |
| rate-error | Kolor | Błąd koloru semantycznego |
Podstawowe użycie
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> |
Rating Shapes
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> |
Half Rating
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> |
Display Only
Użyj aria-checked="true" na ostatnim wypełnionym elemencie — CSS automatycznie wypełnia wszystkie poprzednie.
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> |
Rating Colors
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> |
Rating Sizes
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> |
Read-only Rating
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> |
Rating with Label
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> |
Używasz kodu Claude'a, kursora lub innego edytora AI?
Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Ocena. Żadnych więcej zajęć z halucynacjami.