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

Поставить звезду
Типографика typographymetricscode

Monospace Metrics

Строка технической статистики с моноширинным шрифтом для консолей и метрик.

Monospace Metrics

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

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

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

<MonospaceStatLine>Content</MonospaceStatLine>
--- import { MonospaceMetrics } from 'astro-component-kit'; --- <MonospaceStatLine>Content</MonospaceStatLine>

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

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/MonospaceMetrics.astro:

astro 
---
---
<div class="mono-stat"><slot /></div>
<style>
  .mono-stat { background: #000; color: #00ff00; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; padding: 0.75rem 1.25rem; border-left: 3px solid #00ff00; font-size: 0.8rem; border-radius: 4px; border: 1px solid rgba(0, 255, 0, 0.1); }
</style>
--- --- <div class="mono-stat"><slot /></div> <style> .mono-stat { background: #000; color: #00ff00; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; padding: 0.75rem 1.25rem; border-left: 3px solid #00ff00; font-size: 0.8rem; border-radius: 4px; border: 1px solid rgba(0, 255, 0, 0.1); } </style>

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

Категория
Типографика
Имя файла
MonospaceMetrics.astro
Зависимости
Нет — чистый Astro + CSS
Теги
typographymetricscode