컴포넌트
CheckboxListAnimated
항목을 체크하면 취소선이 좌에서 우로 그어지며 텍스트가 흐려지는(페이드) 완료 애니메이션 체크리스트로, 완료 항목을 아래로 정렬하고 진행 바를 함께 표시한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/CheckboxListAnimated-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | Array<string | { label: string; done?: boolean }> | [5 sample tasks] | 초기 항목 목록. 문자열 또는 {label, done} 객체로 완료 상태 지정 가능. |
| title | string | "오늘의 작업" | 목록 상단에 표시되는 제목. |
| sinkCompleted | boolean | true | 완료된 항목을 목록 맨 아래로 정렬해 내려보낼지 여부. |
| showProgress | boolean | true | 완료 비율을 나타내는 그라데이션 진행 바 노출 여부. |
| onToggle | (label: string, done: boolean) => void | undefined | 항목 체크 상태가 바뀔 때 라벨과 완료여부를 전달하는 콜백. |
| className | string | undefined | 루트 컨테이너에 추가할 클래스명. |