Вертикальный столбик тонких полос-кадров. Полоса под курсором плавно вырастает в полный квадрат, а раскрытая до этого сжимается обратно в тонкую ленту.
На раскрытом кадре проявляется затемнение снизу, а подпись всплывает снизу вверх. На сенсорных экранах кадр раскрывается по нажатию. Горизонтальный вариант — «Раскрытие кадров: ряд».
Скопируйте эти файлы в components/hover-expand-vertical/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { HoverExpandVertical } from "@/components/hover-expand-vertical/hover-expand-vertical";
const images = [
{ src: "/photos/1.webp", alt: "Первый кадр", code: "# 01" },
{ src: "/photos/2.webp", alt: "Второй кадр", code: "# 02" },
{ src: "/photos/3.webp", alt: "Третий кадр", code: "# 03" },
];
export function Column() {
return <HoverExpandVertical images={images} collapsedHeight={32} />;
}imagesКадры с подписями
Тип { src: string; alt: string; code: string }[]
width?Ширина столбика в пикселях
Тип number·По умолчанию 384
expandedHeight?Высота раскрытого кадра в пикселях
Тип number·По умолчанию 384
collapsedHeight?Высота свёрнутой полосы в пикселях
Тип number·По умолчанию 40
radius?Скругление кадров в пикселях
Тип number·По умолчанию 24
gap?Зазор между кадрами в пикселях
Тип number·По умолчанию 4
duration?Длительность раскрытия в секундах
Тип number·По умолчанию 0.3
defaultActive?Индекс кадра, раскрытого при загрузке
Тип number·По умолчанию 1
className?Классы корневого блока
Тип string