1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datos chipsfilterdata

Filter Chips List

Grupo de chips de datos con valores numéricos y badges de incremento/decremento.

All Assets Images Videos Docs Music

Uso

Copia y pega este código directamente en tu página de Astro:

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

<DataChipsGroup>Content</DataChipsGroup>
--- import { FilterChipsList } from 'astro-component-kit'; --- <DataChipsGroup>Content</DataChipsGroup>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/FilterChipsList.astro:

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>
--- --- <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>

Información Rápida

Categoría
Visualización de Datos
Nombre de archivo
FilterChipsList.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
chipsfilterdata