Tesserae

Rating

Description

A component for collecting or displaying star ratings

The Rating component lets users express a value judgment on a 1-to-N star scale. It supports interactive selection, read-only display, and custom star counts.

Samples

Interactive Rating

rating-interactive-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var selectedValue = new SettableObservable<int>(0);
            var interactiveRating = Rating(5)
                .SetValue(3)
                .OnChange(v =>
                {
                    selectedValue.Value = v;
                    Toast().Information(v == 0 ? "Rating cleared" : $"Rated {v} star{(v == 1 ? "" : "s")}");
                });

            var component = HStack().AlignItems(ItemAlign.Center).Children(
                interactiveRating,
                DeferSync(selectedValue, v => TextBlock(v == 0 ? "Not rated" : $"{v} / 5").ML(12).Small())
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Read-Only Ratings

rating-readonly-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = VStack().Children(
                HStack().AlignItems(ItemAlign.Center).Children(
                    Rating(5).SetValue(5).ReadOnly(),
                    TextBlock("5.0 – Excellent").ML(8).Small()
                ),
                HStack().AlignItems(ItemAlign.Center).Children(
                    Rating(5).SetValue(3).ReadOnly(),
                    TextBlock("3.0 – Average").ML(8).Small()
                ),
                HStack().AlignItems(ItemAlign.Center).Children(
                    Rating(5).SetValue(1).ReadOnly(),
                    TextBlock("1.0 – Poor").ML(8).Small()
                ),
                HStack().AlignItems(ItemAlign.Center).Children(
                    Rating(5).SetValue(0).ReadOnly(),
                    TextBlock("Not yet rated").ML(8).Small()
                )
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Custom Star Count

rating-custom-count-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = VStack().Children(
                HStack().AlignItems(ItemAlign.Center).Children(
                    TextBlock("3 stars:").Small().W(80.px()),
                    Rating(3).SetValue(2)
                ),
                HStack().AlignItems(ItemAlign.Center).Children(
                    TextBlock("10 stars:").Small().W(80.px()),
                    Rating(10).SetValue(7)
                )
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}