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

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

KBD Key Cap

Элегантная клавиша клавиатуры (Kbd) с 3D-объемом для показа горячих клавиш.

KBD Key Cap

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

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

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

<KbdIndicator>Content</KbdIndicator>
--- import { KBDKeyCap } from 'astro-component-kit'; --- <KbdIndicator>Content</KbdIndicator>

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

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

astro 
---
---
<kbd class="tau-kbd"><slot /></kbd>
<style>
  .tau-kbd { background: #1e293b; border: 1px solid #334155; border-bottom-width: 3px; border-radius: 6px; padding: 2px 8px; color: #f1f5f9; font-family: sans-serif; font-weight: 700; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; box-shadow: 0 2px 0 rgba(0,0,0,0.4); vertical-align: middle; }
</style>
--- --- <kbd class="tau-kbd"><slot /></kbd> <style> .tau-kbd { background: #1e293b; border: 1px solid #334155; border-bottom-width: 3px; border-radius: 6px; padding: 2px 8px; color: #f1f5f9; font-family: sans-serif; font-weight: 700; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; box-shadow: 0 2px 0 rgba(0,0,0,0.4); vertical-align: middle; } </style>

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

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