mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
119 lines
4.4 KiB
Plaintext
119 lines
4.4 KiB
Plaintext
---
|
|
title: Star rating
|
|
summary: Use star rating to show score values with static stars or interactive star states.
|
|
description: Build star rating UI with stars classes and data-star-rating state selectors.
|
|
related: [/ui/components/icon]
|
|
source: core/scss/ui/_stars.scss
|
|
css-vars: stars
|
|
classnames:
|
|
component:
|
|
- class: stars
|
|
desc: Container element, holding one icon per star
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
import Icon from '@ui/Icon.astro';
|
|
|
|
## Overview
|
|
|
|
Use `.stars` as the container and `.star` for each icon.
|
|
This creates an inline star row with spacing and base color.
|
|
|
|
<Example centered>
|
|
<div class="stars">
|
|
<span class="star text-yellow"><Icon name="star" filled /></span>
|
|
<span class="star text-yellow"><Icon name="star" filled /></span>
|
|
<span class="star text-yellow"><Icon name="star" filled /></span>
|
|
<span class="star text-yellow"><Icon name="star" filled /></span>
|
|
<span class="star"><Icon name="star" filled /></span>
|
|
</div>
|
|
</Example>
|
|
|
|
## Variants
|
|
|
|
### Static value rows
|
|
|
|
Use `.stars` for read-only values in lists and cards.
|
|
Color only the active stars and keep the rest in default color.
|
|
|
|
<Example>
|
|
<div class="space-y">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span>Product quality</span>
|
|
<div class="stars">
|
|
<span class="star text-yellow"><Icon name="star" filled /></span>
|
|
<span class="star text-yellow"><Icon name="star" filled /></span>
|
|
<span class="star text-yellow"><Icon name="star" filled /></span>
|
|
<span class="star text-yellow"><Icon name="star" filled /></span>
|
|
<span class="star text-yellow"><Icon name="star" filled /></span>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span>Delivery speed</span>
|
|
<div class="stars">
|
|
<span class="star text-yellow"><Icon name="star" filled /></span>
|
|
<span class="star text-yellow"><Icon name="star" filled /></span>
|
|
<span class="star text-yellow"><Icon name="star" filled /></span>
|
|
<span class="star"><Icon name="star" filled /></span>
|
|
<span class="star"><Icon name="star" filled /></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Example>
|
|
|
|
### Data-star-rating states
|
|
|
|
The vendor styles also target `[data-star-rating]`.
|
|
Use `.gl-active` and `.gl-star-full` to control active and inactive star color.
|
|
|
|
<Example centered>
|
|
<div data-star-rating class="d-flex gap-1" style="--tblr-icon-size: 1.25rem;">
|
|
<span class="gl-active"><Icon name="star" filled class="gl-star-full" /></span>
|
|
<span class="gl-active"><Icon name="star" filled class="gl-star-full" /></span>
|
|
<span class="gl-active"><Icon name="star" filled class="gl-star-full" /></span>
|
|
<span><Icon name="star" filled class="gl-star-full" /></span>
|
|
<span><Icon name="star" filled class="gl-star-full" /></span>
|
|
</div>
|
|
</Example>
|
|
|
|
### Custom rating colors
|
|
|
|
Use CSS custom properties from vendor styles to change star colors.
|
|
You can set active and inactive colors per instance.
|
|
|
|
<Example centered>
|
|
<div data-star-rating class="d-flex gap-1" style="--gl-star-color: var(--tblr-red); --gl-star-color-inactive: var(--tblr-border-color); --tblr-icon-size: 1.25rem;">
|
|
<span class="gl-active"><Icon name="heart" filled class="gl-star-full" /></span>
|
|
<span class="gl-active"><Icon name="heart" filled class="gl-star-full" /></span>
|
|
<span class="gl-active"><Icon name="heart" filled class="gl-star-full" /></span>
|
|
<span><Icon name="heart" filled class="gl-star-full" /></span>
|
|
<span><Icon name="heart" filled class="gl-star-full" /></span>
|
|
</div>
|
|
</Example>
|
|
|
|
## Examples
|
|
|
|
### Summary rating block
|
|
|
|
Combine stars with text to show score and vote count.
|
|
This pattern works for cards, reviews, and product lists.
|
|
|
|
<Example centered>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="stars">
|
|
<span class="star text-yellow"><Icon name="star" filled /></span>
|
|
<span class="star text-yellow"><Icon name="star" filled /></span>
|
|
<span class="star text-yellow"><Icon name="star" filled /></span>
|
|
<span class="star text-yellow"><Icon name="star" filled /></span>
|
|
<span class="star"><Icon name="star" filled /></span>
|
|
</div>
|
|
<span class="text-secondary">4.0 (128 reviews)</span>
|
|
</div>
|
|
</Example>
|
|
|
|
## Accessibility
|
|
|
|
- Add a text label near stars, for example `4.0 out of 5`.
|
|
- For read-only stars, keep the value visible in text.
|
|
- For interactive ratings, ensure keyboard focus and clear selected state.
|
|
- Do not rely on color alone; pair color with a numeric value.
|