컴포넌트
BadgePulse
알림 카운트 배지가 부드럽게 맥동하며 뒤로 파문 링이 퍼지고, 아이콘을 누르면 카운트가 증가하는 순수 CSS 기반 컴포넌트.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/BadgePulse-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| defaultCount | number | 3 | 비제어 초기 카운트 값. |
| max | number | 99 | 이 값을 초과하면 "max+" 형태로 표기. |
| intensity | number | 0.5 | 맥동 강도(0~1). 배지가 부풀어 오르는 크기와 글로우 세기를 조절. |
| incrementOnClick | boolean | true | 아이콘 버튼을 누르면 카운트를 1 증가시킬지 여부. |
| size | number | 56 | 아이콘 컨테이너 한 변 크기(px). |
| label | string | "알림" | 스크린리더용 접근성 레이블. |