1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Модальные окнаmaskoverlayutility

Backdrop Mask

Маска глубокого размытия фона для фокусировки внимания на диалоге.

Backdrop Blur

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

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

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

<BackdropBlurMask>Content</BackdropBlurMask>

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

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

BackdropBlurMask.tsx
'use client';

import './BackdropBlurMask.css';

/** BackdropBlurMask — ported from astro-component-kit. */
export interface BackdropBlurMaskProps {
}

export function BackdropBlurMask({}: BackdropBlurMaskProps) {
  return (
    <>
      <div className="mask" data-rk-88f2da=""></div>
    </>
  );
}

export default BackdropBlurMask;
BackdropBlurMask.css
/* BackdropBlurMask — ported from astro-component-kit (overlays/BackdropBlurMask.astro) */

.mask:where([data-rk-88f2da]) { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 500; pointer-events: none; }

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

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