컴포넌트
NotificationStack
여러 알림이 아래에서 슬라이드-인하며 위로 쌓이고 자동 소멸·닫기 시 접히며 사라지는 순수 CSS 전환 기반 알림 스택 컴포넌트.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/NotificationStack-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | NotificationItem[] | DEFAULT_ITEMS (3 samples) | 초기 알림 목록. 각 항목은 kind/title/message 를 가진다 (기본 데모 데이터 제공). |
| duration | number | 4200 | 각 알림의 자동 소멸 시간(ms). 0 이하면 자동 소멸하지 않는다. |
| maxStack | number | 3 | 동시에 쌓아둘 최대 개수. 초과하면 가장 오래된 알림이 접히며 밀려난다. |
| transition | number | 340 | 슬라이드/접힘 전환 시간(ms). reduced-motion 시 0으로 강제된다. |
| width | number | 300 | 알림 카드 폭(px). |
| showPushButton | boolean | true | 새 알림을 순환 추가하는 데모 버튼 표시 여부(키보드 접근 가능). |