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

Поставить звезду
Модальные окна menucontextoverlay

Custom Context Menu

Контекстное меню быстрых действий с привязкой к координатам мыши.

Copy Link
Duplicate
Delete Item

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

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

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

<ContextMenuOverlay>Content</ContextMenuOverlay>
--- import { CustomContextMenu } from 'astro-component-kit'; --- <ContextMenuOverlay>Content</ContextMenuOverlay>

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

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

astro 
---
---
<div class="ctx-menu">
  <div class="ctx-group">
    <div class="ctx-item">Copy Link</div>
    <div class="ctx-item">Duplicate</div>
  </div>
  <hr />
  <div class="ctx-item danger">Delete Item</div>
</div>
<style>
  .ctx-menu { width: 200px; background: #111; border: 1px solid #333; border-radius: 10px; padding: 4px; box-shadow: 0 15px 40px rgba(0,0,0,0.6); position: fixed; top: 100px; left: 100px; z-index: 5000; }
  .ctx-item { padding: 8px 12px; font-size: 0.85rem; color: #e2e8f0; border-radius: 6px; cursor: pointer; transition: 0.2s; }
  .ctx-item:hover { background: #6366f1; color: #fff; }
  .danger:hover { background: #ef4444 !important; }
  hr { border: none; border-top: 1px solid #222; margin: 4px 0; }
</style>
--- --- <div class="ctx-menu"> <div class="ctx-group"> <div class="ctx-item">Copy Link</div> <div class="ctx-item">Duplicate</div> </div> <hr /> <div class="ctx-item danger">Delete Item</div> </div> <style> .ctx-menu { width: 200px; background: #111; border: 1px solid #333; border-radius: 10px; padding: 4px; box-shadow: 0 15px 40px rgba(0,0,0,0.6); position: fixed; top: 100px; left: 100px; z-index: 5000; } .ctx-item { padding: 8px 12px; font-size: 0.85rem; color: #e2e8f0; border-radius: 6px; cursor: pointer; transition: 0.2s; } .ctx-item:hover { background: #6366f1; color: #fff; } .danger:hover { background: #ef4444 !important; } hr { border: none; border-top: 1px solid #222; margin: 4px 0; } </style>

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

Категория
Модальные окна
Имя файла
CustomContextMenu.astro
Зависимости
Нет — чистый Astro + CSS
Теги
menucontextoverlay