컴포넌트
Toggle3D
다층 box-shadow로 우물처럼 파인 트랙 위를 볼록한 3D 노브가 그림자를 드리우며 미끄러지는 입체 토글 스위치.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/Toggle3D-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| defaultOn | boolean | false | 비제어 초기 켜짐 여부 (자체 state로 데모에서 바로 동작) |
| size | "sm" | "md" | "lg" | "md" | 크기 프리셋 (트랙/노브 치수) |
| accent | string | "#EC4899" | 켜짐 상태 강조 색상 (브랜드 핑크 기본) |
| disabled | boolean | false | 비활성화 여부 |
| label | string | "3D 토글" | 스크린리더용 aria 라벨 |
| onChange | (on: boolean) => void | undefined | 상태 변경 콜백 |