컴포넌트
SwitchLoading
탭을 전환할 때 잠깐 로딩 스피너를 보여준 뒤 새 콘텐츠가 부드럽게 등장하는 뷰 전환 컴포넌트.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SwitchLoading-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| tabs | string[] | ["개요", "활동", "설정"] | 전환할 탭 라벨 목록. 각 항목이 하나의 뷰가 된다. |
| defaultIndex | number | 0 | 비제어 초기 선택 탭 인덱스. |
| loadingDuration | number | 700 | 전환 시 로딩 스피너를 노출할 시간(ms). |
| onSwitch | (index: number) => void | undefined | 로딩이 끝나 탭 전환이 확정될 때 호출되는 콜백. |
| accentColor | string | #C084FC | 스피너와 활성 탭 강조에 쓰는 브랜드 보라색. |
| secondaryColor | string | #EC4899 | 강조 그라데이션에 쓰는 보조 브랜드 핑크색. |