Class TwRatingTheme

Namespace

TwBlazor.Configuration.Components

Assembly

TwBlazor.dll

Theme configuration for rating components (TwRating<T>). Override any property to customize rating styles globally.

[ExcludeFromCodeCoverage]
public class TwRatingTheme

Inheritance

object

TwRatingTheme

Inherited Members

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Constructors

TwRatingTheme()

public TwRatingTheme()

Properties

Base

Gets or sets the classes for the element that holds the icons. It is the radio group when the rating can be changed and an image when it is read-only.

public required string Base { get; set; }

Property Value

string

Clip

Gets or sets the classes for the element that clips the filled icon to the fraction of the cell it fills. Its width is set inline to 0%, 50% or 100% and it is anchored to the inline start, so in a right to left layout a half-filled icon fills its right half.

public required string Clip { get; set; }

Property Value

string

Colors

Gets or sets the text color palette applied to the filled part of each icon.

public required TwBlazorPalette Colors { get; set; }

Property Value

TwBlazorPalette

Remarks

Each entry carries both its light and dark: mode classes. The filled icons carry the value, so they need the 3:1 non-text contrast ratio against the surface. Warning is used when no Color is set.

Disabled

Gets or sets the classes added to Base when the rating is disabled.

public required string Disabled { get; set; }

Property Value

string

Empty

Gets or sets the classes for the unfilled icon.

public required string Empty { get; set; }

Property Value

string

Remarks

A translucent neutral "overlay" tint, so unfilled icons stay visible on light and dark surfaces alike without competing with the filled ones.

EmptyFocusRing

Gets or sets the classes added to Base to draw a focus ring around every icon while the "no rating" option has keyboard focus, since that option has no icon of its own.

public required string EmptyFocusRing { get; set; }

Property Value

string

Filled

Gets or sets the extra classes for the filled icon, on top of the active Colors entry.

public required string Filled { get; set; }

Property Value

string

FullTarget

Gets or sets the classes for the pointer target that selects a whole icon.

public required string FullTarget { get; set; }

Property Value

string

HalfTarget

Gets or sets the classes for the pointer target that selects the first half of an icon.

public required string HalfTarget { get; set; }

Property Value

string

Input

Gets or sets the classes for the native radio inputs, which are visually hidden but stay in the accessibility tree and the tab order.

public required string Input { get; set; }

Property Value

string

Item

Gets or sets the classes for each icon's cell, which stacks the visible icon over its radio inputs and their pointer targets.

public required string Item { get; set; }

Property Value

string

ItemFocusRing

Gets or sets the classes added to Item to draw a focus ring while one of the cell's radio inputs has keyboard focus. The inputs themselves are visually hidden, so the ring is drawn on the cell.

public required string ItemFocusRing { get; set; }

Property Value

string

ItemHover

Gets or sets the classes added to Item when the rating can be changed and animation is on, growing the hovered icon slightly.

public required string ItemHover { get; set; }

Property Value

string

Large

Gets or sets the icon size classes for Lg.

public required string Large { get; set; }

Property Value

string

Medium

Gets or sets the icon size classes for Md.

public required string Medium { get; set; }

Property Value

string

Pop

Gets or sets the marker class that plays the "pop" animation when an icon is filled by a click or key press.

public required string Pop { get; set; }

Property Value

string

Remarks

The keyframes behind tw-rating-pop live in input.css, since Tailwind has no utility for them, and are switched off under prefers-reduced-motion.

Small

Gets or sets the icon size classes for Sm.

public required string Small { get; set; }

Property Value

string

Visual

Gets or sets the classes for the visible, decorative part of a cell: the unfilled icon with the clipped filled icon on top.

public required string Visual { get; set; }

Property Value

string