Модальные окна actionsoverlaymobile

Bottom Action Tray

Плавающая панель быстрых действий внизу экрана для мобильных устройств.

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

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

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

<FloatingTrayActions>Content</FloatingTrayActions>

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

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/BottomActionTray.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>

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

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

Живое превью

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

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

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