컴포넌트
File Tree
네이티브 details/summary 기반의 펼침/접힘 파일 트리. depth마다 들여쓰기 가이드 라인으로 계층을 표시하고, 펼침 시 마커가 90° 회전하며, JS 상태 없이 키보드 접근성을 확보합니다.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/FileTree-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| defaultOpen | boolean | true | 모든 폴더의 초기 펼침 여부. |
| nodes | FileNode[] | 기본 예시 트리 | 렌더할 트리 데이터. 미지정 시 예시 트리를 사용합니다. |
| accentColor | string | #C084FC | 폴더 아이콘과 가이드 라인에 쓰이는 강조 색상. |
| className | string | undefined | 루트 요소에 적용할 추가 CSS 클래스. |