Отображение данных tagsclouddata

Metric Tag Cloud

Облако тегов с числовыми счетчиками количества записей по темам.

React Astro Next.js Vue Svelte

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

---
import { MetricTagCloud } from 'astro-component-kit';
---

<TagCloudData>Content</TagCloudData>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/MetricTagCloud.astro:

---
---
<div class="t-cloud">
  <span class="t-pill">React</span>
  <span class="t-pill t-active">Astro</span>
  <span class="t-pill">Next.js</span>
  <span class="t-pill">Vue</span>
  <span class="t-pill">Svelte</span>
</div>
<style>
  .t-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .t-pill { padding: 4px 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 100px; color: #94a3b8; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: 0.2s; }
  .t-pill:hover, .t-active { background: #6366f1; color: #fff; border-color: transparent; box-shadow: 0 4px 10px rgba(99,102,241,0.3); }
</style>

Краткая информация

Категория: Отображение данных
Имя файла: MetricTagCloud.astro
Зависимости: Нет — чистый Astro + CSS
Теги: tagsclouddata

Живое превью

Использование

Ручная установка

Краткая информация