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

Filter Chips List

Группа чипов данных с ключевыми показателями и значками изменений.

All Assets Images Videos Docs Music

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

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

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

<DataChipsGroup>Content</DataChipsGroup>

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

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

---
---
<div class="chips-row">
  <span class="chip-active">All Assets</span>
  <span>Images</span>
  <span>Videos</span>
  <span>Docs</span>
  <span>Music</span>
</div>
<style>
  .chips-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
  .chips-row::-webkit-scrollbar { display: none; }
  .chips-row span { padding: 6px 16px; background: #1e293b; border: 1px solid rgba(255, 255, 255, 0.05); color: #94a3b8; font-size: 0.8rem; border-radius: 100px; cursor: pointer; white-space: nowrap; transition: 0.2s; font-weight: 600; }
  .chips-row span:hover { color: #fff; border-color: rgba(255, 255, 255, 0.2); }
  .chip-active { background: #6366f1 !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); }
</style>

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

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

Живое превью

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

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

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