1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datos metadatapillsdata

Metadata Pill List

Agrupación de píldoras de atributos clave-valor para especificaciones técnicas.

OS:MacOS
Ver:14.5
Arch:ARM64

Uso

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

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

<KeyValuePillGroup>Content</KeyValuePillGroup>
--- import { MetadataPillList } from 'astro-component-kit'; --- <KeyValuePillGroup>Content</KeyValuePillGroup>

Instalación Manual

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

astro 
---
---
<div class="meta-row">
  <div class="m-pill">OS:<span>MacOS</span></div>
  <div class="m-pill">Ver:<span>14.5</span></div>
  <div class="m-pill">Arch:<span>ARM64</span></div>
</div>
<style>
  .meta-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .m-pill { background: rgba(0,0,0,0.2); color: #64748b; font-size: 0.7rem; padding: 4px 12px; border-radius: 8px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.05); }
  span { color: #e2e8f0; margin-left: 6px; }
</style>
--- --- <div class="meta-row"> <div class="m-pill">OS:<span>MacOS</span></div> <div class="m-pill">Ver:<span>14.5</span></div> <div class="m-pill">Arch:<span>ARM64</span></div> </div> <style> .meta-row { display: flex; gap: 8px; flex-wrap: wrap; } .m-pill { background: rgba(0,0,0,0.2); color: #64748b; font-size: 0.7rem; padding: 4px 12px; border-radius: 8px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.05); } span { color: #e2e8f0; margin-left: 6px; } </style>

Información Rápida

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