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

Slide-over (Right)

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

Filters

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

Скопируйте и вставьте этот код в ваш React-компонент:

import { SideDrawerRight } from 'react-component-kit-ui/overlays';

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

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

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

'use client';

import type { ReactNode } from 'react';
import './SideDrawerRight.css';

/** SideDrawerRight — ported from astro-component-kit. */
export interface SideDrawerRightProps {
  children?: ReactNode;
}

export function SideDrawerRight({ children }: SideDrawerRightProps) {
  return (
    <>
      <div className="drawer-wrap" data-rk-e9a0cd="">
        <div className="drawer-overlay" data-rk-e9a0cd=""></div>
        <div className="drawer-panel right" data-rk-e9a0cd="">
          <div className="drawer-header" data-rk-e9a0cd=""><h3 data-rk-e9a0cd="">Filters</h3><span data-rk-e9a0cd="">×</span></div>
          <div className="drawer-body" data-rk-e9a0cd="">{children}</div>
        </div>
      </div>
    </>
  );
}

export default SideDrawerRight;

/* SideDrawerRight — ported from astro-component-kit (overlays/SideDrawerRight.astro) */

.drawer-wrap:where([data-rk-e9a0cd]) { position: fixed; inset: 0; z-index: 2000; }
.drawer-overlay:where([data-rk-e9a0cd]) { position: absolute; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); }
.drawer-panel:where([data-rk-e9a0cd]) { 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:where([data-rk-e9a0cd]) { right: 0; transform: translateX(0); }
.drawer-header:where([data-rk-e9a0cd]) { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; color: #fff; }

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

Категория: Модальные окна
Имя файла: SideDrawerRight.tsx
Зависимости: Нет — чистый React + CSS
Теги: drawerpaneloverlay