1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Отображение данных metadatapillsdata

Metadata Pill List

Группа плашек «ключ-значение» для компактного вывода характеристик.

OS:MacOS
Ver:14.5
Arch:ARM64

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

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

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

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

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

Если вы не используете пакет npm, создайте файл и вставьте следующий код: 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>

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

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