Отображение данных ratingdatagraph
Rating Distribution
Визуальное распределение оценок от 1 до 5 звезд с полосами долей голосов.
Живое превью
5★
4★
3★
Использование
Скопируйте и вставьте этот код на вашу страницу Astro:
astro
---
import { RatingDistribution } from 'astro-component-kit';
---
<RatingBreakdownBar>Content</RatingBreakdownBar>Ручная установка
Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/RatingDistribution.astro:
astro
---
---
<div class="rating-box">
<div class="r-row"><span>5★</span><div class="bar-bg"><div class="bar-val" style="width: 80%"></div></div></div>
<div class="r-row"><span>4★</span><div class="bar-bg"><div class="bar-val" style="width: 15%"></div></div></div>
<div class="r-row"><span>3★</span><div class="bar-bg"><div class="bar-val" style="width: 5%"></div></div></div>
</div>
<style>
.rating-box { display: flex; flex-direction: column; gap: 8px; width: 220px; }
.r-row { display: flex; align-items: center; gap: 10px; color: #94a3b8; font-size: 0.75rem; font-weight: 700; }
.bar-bg { flex: 1; height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.03); }
.bar-val { height: 100%; background: #fbbf24; border-radius: inherit; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }
</style>Краткая информация
- Категория
- Отображение данных
- Имя файла
RatingDistribution.astro- Зависимости
- Нет — чистый Astro + CSS
- Теги
- ratingdatagraph