Отображение данных datalistdetails
Data Key-Value List
Список определений с горизонтальным выравниванием терминов и значений.
Живое превью
- Module Name
- AuthEngine
- Version
- 1.4.2
- Status
- Deployment Ready
Использование
Скопируйте и вставьте этот код на вашу страницу Astro:
astro
---
import { DataKey-ValueList } from 'astro-component-kit';
---
<DescriptionListHoriz>Content</DescriptionListHoriz>Ручная установка
Если вы не используете пакет npm, создайте файл и вставьте следующий код: 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>Краткая информация
- Категория
- Отображение данных
- Имя файла
DataKey-ValueList.astro- Зависимости
- Нет — чистый Astro + CSS
- Теги
- datalistdetails