КарточкиProНовое
Карточка со сдвигом
При наведении картинка перелетает из центра в угол, а снизу выезжает панель с действиями. Красиво подаёт превью и кнопки «поделиться».
Настройки
accentColor
glowColor
borderColor
Основано на Shift Card (MIT лицензия) · Условия использования
Параметры
8 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| topContent | ReactNode | — | Шапка карточки, видна всегда. |
| topAnimateContent | ReactNode | — | Что появляется в шапке при наведении. Дайте картинке тот же layoutId, что в middleContent. |
| middleContent | ReactNode | — | Содержимое центра, видно без наведения. |
| bottomContent | ReactNode | — | Панель, которая выезжает снизу. |
| className | string | — | Дополнительные классы. |
| accentColor | string | "#e5e5e5" | Акцент для кнопок и иконок внутри карточки. Доступен детям как --sc-accent. |
| glowColor | string | "rgba(255,255,255,0.08)" | Мягкое свечение в верхнем углу карточки. |
| borderColor | string | "rgba(255,255,255,0.1)" | Тонкая рамка вокруг карточки. |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge