Rating

package showcase import ( "github.com/templui/templui/components/label" "github.com/templui/templui/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> }

package showcase import "github.com/templui/templui/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> }

package showcase import "github.com/templui/templui/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, }) } } } }

package showcase import "github.com/templui/templui/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 }) } } } }

package showcase import ( "github.com/templui/templui/components/field" "github.com/templui/templui/components/rating" ) templ RatingForm() { <form class="max-w-sm mx-auto"> @field.Field() { @field.Label(field.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, }) } } } @field.Description() { Rate the quality of the product you received. } @field.Error() { Please rate the product quality. } } </form> }