컴포넌트
Toast Swipe Dismiss
토스트 카드를 좌우로 밀면 진행률에 따라 흐려지며, 임계값을 넘기거나 빠르게 플링하면 화면 밖으로 날아가 해제되는 스와이프 해제 토스트 스택입니다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ToastSwipeDismiss-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | SwipeToastItem[] | DEFAULT_ITEMS | 표시할 토스트 목록 (제목/설명/강조색). 미지정 시 브랜드 데모 데이터 사용 |
| dismissThreshold | number | 0.4 | 해제로 판정하는 드래그 진행률 임계값 (0~1, 카드 폭 대비 이동 비율) |
| flingVelocity | number | 0.55 | 진행률과 무관하게 해제로 판정하는 플링 속도 임계값 (px/ms) |
| transition | number | 320 | 복귀/해제 애니메이션 시간 (ms) |
| gap | number | 10 | 토스트 카드 간 세로 간격 (px) |
| surfaceColor | string | #16121F | 토스트 카드 표면 배경색 |