1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capas mobilesheetoverlay

Bottom Sheet

Panel deslizante inferior optimizado para móviles con asa de arrastre interactiva.

Select Option

Archive
Delete
Share

Uso

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

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

<BottomSheetMobile>Content</BottomSheetMobile>
--- import { BottomSheet } from 'astro-component-kit'; --- <BottomSheetMobile>Content</BottomSheetMobile>

Instalación Manual

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

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>
--- --- <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>

Información Rápida

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