КомпонентыProНовое
Модальное окно из карточки
Карточка по клику плавно вырастает в большое окно: картинка, заголовок и подпись перетекают на новое место. Закрывается крестиком, кликом по фону или клавишей Esc.
Настройки
accentColor
glowColor
highlightColor
Основано на Linear Modal (MIT лицензия) · Условия использования
Параметры
11 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| children | ReactNode | — | Карточка DialogTrigger и окно DialogContainer с DialogContent. |
| bounce | number | 0.15 | Пружинистость перехода из карточки в окно. Ноль без отскока. |
| duration | number | 0.45 | Длительность перехода в секундах. |
| transition | Transition | — | Свой переход motion целиком. Заменяет bounce и duration. |
| DialogContainer.overlayClassName | string | — | Классы затемнения за окном. |
| DialogDescription.disableLayoutAnimation | boolean | — | Текст просто проявляется, без перетекания из карточки. |
| DialogImage.src | string | — | Картинка, которая перетекает из карточки в окно. |
| accentColor | string | "#ffffff" | Главный цвет: мягкое свечение под открытым окном. |
| glowColor | string | "rgba(115,115,115,0.55)" | Оттенок, который поднимается от краёв тёмного фона за окном. |
| highlightColor | string | "rgba(255,255,255,0.12)" | Тонкий светлый блик по верхнему краю окна. |
| className | string | — | Дополнительные классы. |
Зависимости
Пакетов: 4
npm install motion lucide-react clsx tailwind-merge