컴포넌트
Snackbar
하단에서 슬라이드로 등장하는 스낵바로, 액션 버튼과 닫기 버튼, 남은 시간 진행바를 갖추고 메시지를 순차 표시하며 호버 시 자동 소멸이 일시정지된다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/Snackbar-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| messages | SnackbarMessage[] | 3개 기본 메시지 | 순차 표시할 메시지 목록(각 항목은 text와 선택적 actionLabel). 비제어 기본값 제공. |
| actionLabel | string | "실행 취소" | 메시지에 개별 actionLabel이 없을 때 사용하는 액션 버튼 폴백 라벨. |
| duration | number | 4000 | 자동 소멸 시간(ms). 0 이하이면 자동 소멸하지 않음. |
| loop | boolean | true | 마지막 메시지 이후 처음부터 반복 재생할지 여부. |
| showProgress | boolean | true | 남은 시간을 나타내는 하단 진행바 표시 여부. |
| accentFrom | string | "#C084FC" | 액션 버튼·진행바 그라데이션 시작 색상(브랜드 퍼플). |