컴포넌트
Pinned Layers
내부 스크롤 시 카드가 상단에 sticky로 쌓이고 뒤 카드는 살짝 축소·하강해 깊이감 있는 스택을 만든다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/PinnedLayers-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | PinnedLayersItem[] | [] (5 dummy cards) | 표시할 카드 목록(미지정 시 브랜드 더미 데이터 자동 생성) |
| count | number | 5 | items 미지정 시 자동 생성할 더미 카드 개수 |
| stackOffset | number | 18 | 카드가 상단에 고정되는 기준 간격(px), 카드마다 계단식 누적 |
| scaleStep | number | 0.08 | 뒤 카드가 최대로 축소되는 비율 |
| translateStep | number | 26 | 뒤 카드가 활성화 전 아래로 밀리는 최대 거리(px) |
| onActiveChange | (index: number) => void | undefined | 활성 카드가 바뀔 때 호출되는 콜백(0-base 인덱스) |