File Tree
직접 작성하는 문서를 위한 의미 있는 파일과 접을 수 있는 디렉터리예요.
핵심 속성
TRFileTree는 직접 작성한 Markdown 순서 없는 목록을 의미 있는 파일 목록으로 바꿔요. 중첩한 목록은 디렉터리가 되고, /로 끝나는 항목은 장식용 placeholder가 있는 빈 디렉터리가 돼요. 디렉터리는 플랫폼 details 요소로 펼치고 접어요. 기본으로 열려 있고 포인터, Enter, Space의 네이티브 동작을 그대로 유지해요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/file-tree.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRFileTree } from '@tinyrack/ui/components/file-tree';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
사용법
예시
Markdown 목록을 중첩해 디렉터리를 만드세요. 경로는 마지막 글자가 /일 때만 디렉터리가 돼요. 링크, 굵은 글씨, 코드 같은 인라인 Markdown은 그대로 유지되고, 긴 경로는 좁은 레이아웃 안에서 줄바꿈돼요.
API
TRFileTree에는 컴포넌트 전용 스칼라 속성이 없어요. children으로 작성한 순서 없는 목록을 전달하고 aria-label, className, style, 이벤트 처리기, React 19 ref를 포함한 네이티브 ul 속성을 전달해요. 주변 콘텐츠가 트리에 레이블을 제공하지 않으면 aria-label로 접근 가능한 이름을 지정하세요.
표시는 --tr-file-tree-background, --tr-file-tree-border, --tr-file-tree-border-width, --tr-file-tree-color, --tr-file-tree-font-family, --tr-file-tree-font-size, --tr-file-tree-gap, --tr-file-tree-indent, --tr-file-tree-margin, --tr-file-tree-marker, --tr-file-tree-padding, --tr-file-tree-placeholder-color, --tr-file-tree-radius로 조정할 수 있어요. 각 token은 대응하는 Tinyrack semantic token으로 fallback돼요.