컴포넌트
Expandable Gallery
flex 트랙에 나란히 둔 패널들에 기본 flex-grow:1을 주고, :hover된 패널에만 큰 flex-grow를 부여해 flex 알고리즘이 남는 공간을 몰아주도록 합니다. flex-grow에 transition을 걸어 상태 없이 순수 CSS만으로 부드럽게 확장되며, 이미지는 인덱스로 HSL을 절차적으로 계산한 브랜드 그라디언트 패널을 사용합니다.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ExpandableGallery-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| count | number | 5 | 패널 개수. |
| height | number | 240 | 갤러리 높이(px). |
| labels | string[] | undefined | 각 패널 라벨(생략 시 번호 자동 생성). |
| className | string | undefined | 추가 CSS 클래스. |