Table of Contents

Class TwRating<T>

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

Represents a rating input that shows a value as a row of icons, such as stars, and lets the user pick a new one.

public class TwRating<T> : TwBlazorInputComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent, ITwInputComponent where T : INumber<T>

Type Parameters

T

The numeric type of the value. Use an integer type for whole icons, or a fractional type for half icons.

Inheritance
TwRating<T>
Implements
Inherited Members

Remarks

The precision follows T: an integer type rates in whole icons, while a type that can hold fractions (double, decimal, float) rates in half icons. The displayed value is rounded to that precision using Rounding; the bound value itself is never rewritten.

Each selectable value is a visually hidden native radio input, so the rating is a single Tab stop, the arrow keys move through the values, and screen readers announce it as a radio group ("3.5 out of 5"). A half icon is drawn by clipping the filled icon to half its width, so any Icon can be used. A read-only rating is announced as a single image ("Rated 3.5 out of 5") instead.

Constructors

TwRating() 

public TwRating()

Properties

Color

Gets or sets the color of the filled icons. Defaults to Warning.

[Parameter]
public Color? Color { get; set; }

Property Value

Color?

DisableAnimation

Gets or sets whether the hover growth and the "pop" played when a rating is picked are turned off.

[Parameter]
public bool DisableAnimation { get; set; }

Property Value

bool

Remarks

Both animations are always skipped for users who ask their system for reduced motion.

EmptyIcon

Gets or sets the icon drawn behind the filled part, for the unfilled steps. Defaults to Icon, shown in a muted tint.

[Parameter]
public Icon? EmptyIcon { get; set; }

Property Value

Icon?

Remarks

An outline icon (such as Star with Star_Fill) adds a shape cue on top of the color, which helps anyone who cannot easily tell the two colors apart.

Icon

Gets or sets the icon drawn for each step. Defaults to Star_Fill.

[Parameter]
public Icon Icon { get; set; }

Property Value

Icon

Remarks

The filled part of the rating is this icon in Color; a half step shows its first half.

Max

Gets or sets the highest rating, which is also the number of icons shown. Defaults to 5.

[Parameter]
public T Max { get; set; }

Property Value

T

Min

Gets or sets the lowest rating the user can pick. Defaults to 0.

[Parameter]
public T Min { get; set; }

Property Value

T

Remarks

When this is 0 the user can clear the rating, by clicking the selected icon again or by choosing the "No rating" option from the keyboard. Values below Min are still displayed, they just cannot be picked. Negative values are treated as 0.

Name

Gets or sets the name shared by the rating's radio inputs. Defaults to the component's id.

[Parameter]
public string Name { get; set; }

Property Value

string

Rounding

Gets or sets how a value between steps is rounded for display. Defaults to AwayFromZero, so 3.75 shows as 4 and 3.7 as 3.5.

[Parameter]
public MidpointRounding Rounding { get; set; }

Property Value

MidpointRounding

Remarks

Use ToNegativeInfinity to always round down (3.9 shows as 3.5), or ToPositiveInfinity to always round up (3.1 shows as 3.5).

Size

Gets or sets the size of the icons. Defaults to Md.

[Parameter]
public Size Size { get; set; }

Property Value

Size

Value

Gets or sets the current rating.

[Parameter]
public T Value { get; set; }

Property Value

T

Remarks

Values between steps are displayed rounded to the nearest step allowed by Rounding, and values outside Min and Max are displayed clamped. The value is only changed by the user.

ValueChanged

Gets or sets the callback that is invoked when the user picks a new rating.

[Parameter]
public EventCallback<T> ValueChanged { get; set; }

Property Value

EventCallback<T>

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

OnParametersSet()

Invoked when the component's parameters have been set. Ensures that the component has a unique identifier by generating one if none is provided.

protected override void OnParametersSet()

Remarks

If the component's identifier is not set, a unique ID is generated based on the component's type name (with a 'Tw' prefix removed if present) and a GUID. This helps ensure that each component instance can be uniquely identified, which is useful for scenarios such as associating labels with form elements or targeting elements in client-side scripts.

Edit this page