АнимацииProНовое
Галерея-гармошка
Картинки стоят в ряд. Та, на которую навели, раскрывается шире и показывает подпись, а остальные сжимаются в узкие матовые полоски. Работает на чистом CSS.
Настройки
color
overlayColor
titleColor
descriptionColor
Основано на Tailwind Image Accordion (MIT лицензия) · Условия использования
Параметры
7 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| items | { src: string; title: string; description: string; href?: string }[] | — | Панели: картинка, заголовок, подпись и ссылка. |
| height | number | 420 | Высота панелей на широком экране в пикселях. |
| color | string | "rgba(255, 255, 255, 0.5)" | Рамка вокруг панели в фокусе с клавиатуры. |
| overlayColor | string | "rgba(0, 0, 0, 0.3)" | Вуаль на сжатых панелях, пока открыта другая. |
| titleColor | string | "#ffffff" | Цвет заголовков. Стоят на тёмном низу картинки, поэтому светлые. |
| descriptionColor | string | "rgba(255, 255, 255, 0.7)" | Цвет короткой строки над заголовком. |
| className | string | — | Дополнительные классы. |
Зависимости
Пакетов: 2
npm install clsx tailwind-merge