Rating
Interactive rating component for capturing user feedback and displaying scores.
package showcase
import "github.com/axzilla/templui/internal/components/rating"
templ RatingDefault() {
@rating.Rating(rating.Props{
Value: 3.5,
ReadOnly: false,
Precision: 0.5,
}) {
@rating.Group() {
for i := 1; i <= 5; i++ {
@rating.Item(rating.ItemProps{
Value: i,
Style: rating.StyleStar,
})
}
}
}
}
Installation
Install the component
templui add ratingAdd the JavaScript to your layout
@rating.Script()Call this template in your base layout file (e.g., in the <head> section).
Examples
With Label
package showcase
import (
"github.com/axzilla/templui/internal/components/label"
"github.com/axzilla/templui/internal/components/rating"
)
templ RatingWithLabel() {
<div class="items-center">
<div class="flex flex-col gap-2">
@label.Label(label.Props{
For: "rating-with-label",
}) {
Fruit
}
@rating.Rating(rating.Props{
Value: 2,
}) {
@rating.Group() {
for i := 1; i <= 5; i++ {
@rating.Item(rating.ItemProps{
Value: i,
Style: rating.StyleStar,
})
}
}
}
</div>
</div>
}
Styles
package showcase
import "github.com/axzilla/templui/internal/components/rating"
templ RatingStyles() {
<div class="flex flex-col gap-4">
@rating.Rating(rating.Props{
Value: 2,
}) {
@rating.Group() {
for i := 1; i <= 5; i++ {
@rating.Item(rating.ItemProps{
Value: i,
Style: rating.StyleStar,
})
}
}
}
@rating.Rating(rating.Props{
Value: 3,
}) {
@rating.Group() {
for i := 1; i <= 5; i++ {
@rating.Item(rating.ItemProps{
Value: i,
Style: rating.StyleHeart,
})
}
}
}
@rating.Rating(rating.Props{
Value: 4,
}) {
@rating.Group() {
for i := 1; i <= 5; i++ {
@rating.Item(rating.ItemProps{
Value: i,
Style: rating.StyleEmoji,
})
}
}
}
</div>
}
Precision (Read-Only)
package showcase
import "github.com/axzilla/templui/internal/components/rating"
templ RatingPrecision() {
@rating.Rating(rating.Props{
Value: 1.3,
ReadOnly: true,
Precision: 0.5,
}) {
@rating.Group() {
for i := 1; i <= 5; i++ {
@rating.Item(rating.ItemProps{
Value: i,
Style: rating.StyleStar,
})
}
}
}
}
Max Values
package showcase
import "github.com/axzilla/templui/internal/components/rating"
templ RatingMaxValues() {
@rating.Rating(rating.Props{
Value: 7,
}) {
@rating.Group() {
for i := 1; i <= 10; i++ {
@rating.Item(rating.ItemProps{
Value: i,
Style: rating.StyleStar,
Class: "scale-75", // Smaller stars for better display
})
}
}
}
}
Form
package showcase
import (
"github.com/axzilla/templui/internal/components/form"
"github.com/axzilla/templui/internal/components/rating"
)
templ RatingForm() {
<form class="max-w-sm mx-auto">
@form.Item() {
@form.Label(form.LabelProps{
For: "product_quality",
}) {
Product Quality
}
@rating.Rating(rating.Props{
Value: 3,
ReadOnly: false,
Precision: 1.0,
Name: "product_quality",
}) {
@rating.Group() {
for i := 1; i <= 5; i++ {
@rating.Item(rating.ItemProps{
Value: i,
Style: rating.StyleStar,
})
}
}
}
@form.Description() {
Rate the quality of the product you received.
}
@form.Message(form.MessageProps{
Variant: form.MessageVariantError,
}) {
Please rate the product quality.
}
}
</form>
}