1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capas popovermenuglass

Glass Popover

Menú popover flotante con efecto glassmorphism anclado a un botón disparador.

Edit Account
Billing
Logout

Uso

Copia y pega este código directamente en tu página de Astro:

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

<PopoverMenuGlass>Content</PopoverMenuGlass>
--- import { GlassPopover } from 'astro-component-kit'; --- <PopoverMenuGlass>Content</PopoverMenuGlass>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/GlassPopover.astro:

astro 
---
---
<div class="popover">
  <div class="pop-inner">
    <div class="pop-item">Edit Account</div>
    <div class="pop-item">Billing</div>
    <hr />
    <div class="pop-item logout">Logout</div>
  </div>
</div>
<style>
  .popover { width: 180px; background: rgba(10, 10, 20, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 6px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
  .pop-item { padding: 8px 12px; border-radius: 8px; color: #94a3b8; font-size: 0.85rem; cursor: pointer; }
  .pop-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
  .logout { color: #f87171 !important; }
  hr { border: none; border-top: 1px solid rgba(255,255,255,0.06); margin: 6px 0; }
</style>
--- --- <div class="popover"> <div class="pop-inner"> <div class="pop-item">Edit Account</div> <div class="pop-item">Billing</div> <hr /> <div class="pop-item logout">Logout</div> </div> </div> <style> .popover { width: 180px; background: rgba(10, 10, 20, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 6px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); } .pop-item { padding: 8px 12px; border-radius: 8px; color: #94a3b8; font-size: 0.85rem; cursor: pointer; } .pop-item:hover { background: rgba(255,255,255,0.06); color: #fff; } .logout { color: #f87171 !important; } hr { border: none; border-top: 1px solid rgba(255,255,255,0.06); margin: 6px 0; } </style>

Información Rápida

Categoría
Modales & Capas
Nombre de archivo
GlassPopover.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
popovermenuglass