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

Slide-over (Right)

Выдвижная шторка с правого края экрана для корзины покупок и фильтров.

Filters

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

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

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

<SideDrawerRight>
  <div class="p-6">
    <h4 class="mb-4">Quick Settings</h4>
    <div class="stack-v gap-2">
      <label>Notifications</label>
      <label>Privacy</label>
      <label>Security</label>
    </div>
  </div>
</SideDrawerRight>

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

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

---
---
<div class="drawer-wrap">
  <div class="drawer-overlay"></div>
  <div class="drawer-panel right">
    <div class="drawer-header"><h3>Filters</h3><span>×</span></div>
    <div class="drawer-body"><slot /></div>
  </div>
</div>
<style>
  .drawer-wrap { position: fixed; inset: 0; z-index: 2000; }
  .drawer-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); }
  .drawer-panel { position: absolute; top: 0; bottom: 0; width: 350px; background: #080b14; border-left: 1px solid rgba(255, 255, 255, 0.1); padding: 2rem; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
  .drawer-panel.right { right: 0; transform: translateX(0); }
  .drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; color: #fff; }
</style>

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

Категория: Модальные окна
Имя файла: Slide-over(Right).astro
Зависимости: Нет — чистый Astro + CSS
Теги: drawerpaneloverlay