Tesserae - Rating

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.

API reference

class

Rating

public sealed class Rating : ComponentBase<Rating, HTMLElement>

A star-rating component for collecting or displaying ratings.

Constructors

Constructor

Rating

public Rating(int maxStars = 5)

Initializes a new Rating component.

Parameters

maxStars: Maximum number of stars (default 5).

Properties

Property

Rating.Value

public int Value { get ; set ; }

Gets or sets the current rating value (0 = unrated).

Property

Rating.IsReadOnly

public bool IsReadOnly { get ; set ; }

Gets or sets whether the rating is read-only.

Methods

Method

Rating.Color

public Rating Color(string color)

Sets a custom star color.

Method

Rating.OnChange

public Rating OnChange(Action<int> onChange)

Registers a callback for when the value changes.

Method

Rating.SetValue

public Rating SetValue(int value)

Sets the current value.

Method

Rating.ReadOnly

public Rating ReadOnly(bool value = true)

Makes the rating read-only.

Method

Rating.Render

public override HTMLElement Render()

Renders the component's root HTML element.

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);
        }
    }
}

Rating

Description

API reference

Constructors

Rating

Parameters

Properties

Rating.Value

Rating.IsReadOnly

Methods

Rating.Color

Rating.OnChange

Rating.SetValue

Rating.ReadOnly

Rating.Render

Samples

Interactive Rating

Read-Only Ratings

Custom Star Count

See also