컴포넌트
QuantityStepper
−/+ 버튼으로 수량을 조절하면 각 자릿수가 슬롯머신처럼 세로로 롤링되는 수량 스테퍼로, 증가·감소 방향에 따라 강조 색이 바뀝니다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/QuantityStepper-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| defaultValue | number | 1 | 비제어 모드의 초기 수량 값 |
| min | number | 0 | 허용 최소값 (도달 시 − 버튼 자동 비활성화) |
| max | number | 99 | 허용 최대값 (도달 시 + 버튼 자동 비활성화) |
| step | number | 1 | −/+ 클릭 시 증감 단위 |
| size | number | 56 | 셀 높이 기준 전체 크기(px) |
| suffix | string | undefined | 값 뒤에 붙는 단위 표기(예: 개) |