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

Bottom Sheet

Мобильная шторка, плавно выезжающая снизу с ручкой для перетаскивания.

Select Option

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

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

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

<BottomSheetMobile>Content</BottomSheetMobile>

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

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

---
---
<div class="sheet-overlay">
  <div class="sheet-content">
    <div class="drag-handle"></div>
    <h3>Select Option</h3>
    <div class="options"><div>Archive</div><div>Delete</div><div>Share</div></div>
  </div>
</div>
<style>
  .sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: flex-end; z-index: 2000; }
  .sheet-content { width: 100%; background: #0f172a; border-radius: 20px 20px 0 0; padding: 1.5rem; transform: translateY(0); }
  .drag-handle { width: 40px; height: 4px; background: #334155; border-radius: 2px; margin: 0 auto 1.5rem; }
  h3 { color: #fff; text-align: center; margin-bottom: 1.5rem; }
  .options div { padding: 1rem; color: #e2e8f0; border-bottom: 1px solid #1e293b; text-align: center; cursor: pointer; }
</style>

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

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