1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capas actionsoverlaymobile

Bottom Action Tray

Bandeja flotante inferior de acciones rápidas con botones de acceso directo.

Uso

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

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

<FloatingTrayActions>Content</FloatingTrayActions>
--- import { BottomActionTray } from 'astro-component-kit'; --- <FloatingTrayActions>Content</FloatingTrayActions>

Instalación Manual

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

astro 
---
---
<div class="tray">
  <button class="tray-btn">✏️ Edit</button>
  <div class="sep"></div>
  <button class="tray-btn">↗️ Share</button>
</div>
<style>
  .tray { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 100px; display: flex; align-items: center; padding: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); z-index: 1000; border: 1px solid rgba(0,0,0,0.1); }
  .tray-btn { background: none; border: none; padding: 0.6rem 1.25rem; font-weight: 700; color: #000; cursor: pointer; font-size: 0.85rem; transition: 0.2s; }
  .tray-btn:hover { opacity: 0.6; }
  .sep { width: 1px; height: 20px; background: #eee; }
</style>
--- --- <div class="tray"> <button class="tray-btn">✏️ Edit</button> <div class="sep"></div> <button class="tray-btn">↗️ Share</button> </div> <style> .tray { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 100px; display: flex; align-items: center; padding: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); z-index: 1000; border: 1px solid rgba(0,0,0,0.1); } .tray-btn { background: none; border: none; padding: 0.6rem 1.25rem; font-weight: 700; color: #000; cursor: pointer; font-size: 0.85rem; transition: 0.2s; } .tray-btn:hover { opacity: 0.6; } .sep { width: 1px; height: 20px; background: #eee; } </style>

Información Rápida

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