Rating

Displays a ratio/fraction of elements like 2.5/5 or 5/10, useful for star ratings on products or a meter made from icons

Features:

• Display a ratio/fraction of elements
• Supports halved stars for star ratings

Example:

---
import { Rating } from 'astro-headless-ui';
import { Icon } from 'astro-icon';
---
<Rating total="5" active="2.5">
    <Icon slot="active" name="codicon:star-full"></Icon>
    <Icon slot="half" name="codicon:star-half"></Icon>
    <Icon slot="disabled" name="codicon:star-empty"></Icon>
</Rating>

Props

total?: number|string

Default: 5

The total number of elements to render, the denominator

active?: number|string

Default: 0

The number of times the active slot is rendered, the numerator

Slots

active

This slot represents an element that is 'active' or true

When creating a star rating for a product this slot should contain a full/solid/colored/'active' star

half

This slot is rendered only once between the active and disabled slots if the active prop has a decimal (2.1, 3.5, 7.9).

When creating a star rating for a product this slot should contain a half star

disabled

This slot represents an element that is 'disabled' or false

When creating a star rating for a product this slot should contain a gray/outlined/'disabled' star