SusRating

Star (or custom icon) rating — whole or half increments.

Package

SusKit · Atoms (commercial)

Open in Playground

SusKit · Atoms

Props

Name	Type	Default
Value	Prop<float>	0	v-model
Max	Prop<int>	5	v-model
Color	Prop<string>	"warning"	v-model
EmptyIcon	Prop<string>	"star"	v-model
FullIcon	Prop<string>	"star-fill"	v-model
HalfIcon	Prop<string>	"star-half"	v-model
HalfIncrements	Prop<bool>	false	v-model
Hover	Prop<bool>	false	v-model
Readonly	Prop<bool>	false	v-model
Size	Prop<string>	"md"	v-model
Clearable	Prop<bool>	false	v-model

Slots

No slots.

Events

Name	Field	Payload
ValueChanged	OnValueChanged	float

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• sus-rating
• sus-rating__star
• sus-rating__star-empty
• sus-rating__star-fill-clip
• sus-rating__star-full
• sus-rating--danger
• sus-rating--hover
• sus-rating--info
• sus-rating--primary
• sus-rating--readonly
• sus-rating--secondary
• sus-rating--size-lg
• sus-rating--size-sm
• sus-rating--size-xl
• sus-rating--success
• sus-rating--warning

Usage

<template>
  <sus:SusRating :Value="Score.Value"
                 Max="5"
                 Color="warning"
                 HalfIncrements="true"
                 Hover="true"
                 @value-changed="OnScore" />
</template>

<script>
public Prop<float> Score = new(3.5f);
void OnScore(float value) { /* … */ }
</script>

var rating = new SusRating();
rating.Value.Value = 4f;
rating.Max.Value = 5;
rating.Color.Value = "warning";
rating.Clearable.Value = true;
rating.OnValueChanged += value => { /* … */ };

Notes

• Override icons with EmptyIcon / FullIcon / HalfIcon (Phosphor names).
• Readonly for display-only scores; Hover previews the value under the pointer.