1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datos datalistdetails

Data Key-Value List

Lista de descripciones con etiquetas en columna izquierda y valores alineados.

Module Name
AuthEngine
Version
1.4.2
Status
Deployment Ready

Uso

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

astro 
---
import { DataKey-ValueList } from 'astro-component-kit';
---

<DescriptionListHoriz>Content</DescriptionListHoriz>
--- import { DataKey-ValueList } from 'astro-component-kit'; --- <DescriptionListHoriz>Content</DescriptionListHoriz>

Instalación Manual

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

astro 
---
---
<dl class="desc-list">
  <div class="row"><dt>Module Name</dt><dd>AuthEngine</dd></div>
  <div class="row"><dt>Version</dt><dd>1.4.2</dd></div>
  <div class="row"><dt>Status</dt><dd>Deployment Ready</dd></div>
</dl>
<style>
  .desc-list { display: flex; flex-direction: column; width: 100%; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.1); }
  .row { display: grid; grid-template-columns: 140px 1fr; padding: 0.75rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.85rem; }
  .row:last-child { border-bottom: none; }
  dt { color: #64748b; font-weight: 600; }
  dd { color: #fff; margin: 0; }
</style>
--- --- <dl class="desc-list"> <div class="row"><dt>Module Name</dt><dd>AuthEngine</dd></div> <div class="row"><dt>Version</dt><dd>1.4.2</dd></div> <div class="row"><dt>Status</dt><dd>Deployment Ready</dd></div> </dl> <style> .desc-list { display: flex; flex-direction: column; width: 100%; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.1); } .row { display: grid; grid-template-columns: 140px 1fr; padding: 0.75rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.85rem; } .row:last-child { border-bottom: none; } dt { color: #64748b; font-weight: 600; } dd { color: #fff; margin: 0; } </style>

Información Rápida

Categoría
Visualización de Datos
Nombre de archivo
DataKey-ValueList.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
datalistdetails