Tree Nav
접히는 그룹과 레벨별 가이드 레일을 갖춘 범용 재귀 내비게이션 트리예요.
핵심 속성
TRTreeNav는 임의의 깊이로 중첩된 접히는 그룹의 재귀 내비게이션 트리를 렌더링해요. 각 레벨은 가이드 레일과 점진적 들여쓰기를 얻고, 활성 목적지로 이어지는 분기의 레일이 강조돼요. 리프 렌더링은 renderLeaf에 위임하므로 트리는 라우터와 도메인에 종속되지 않아요.
forceOpen이 설정되면 그룹이 마운트 시 열리고, 하위 항목이 활성화되면 다시 열려요. 현재 목적지의 상위 그룹에 activeBranch를 주면 해당 레일이 켜져요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/tree-nav.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRTreeNav, type TRTreeNavItem } from '@tinyrack/ui/components/tree-nav';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
사용법
예시
TRTreeNav는 TRDocsNavigation 뒤의 프리미티브예요. 도메인 데이터를 TRTreeNavItem 노드로 매핑하고, 리프별 데이터를 data에 담아, renderLeaf에서 링크를 반환해요. 라우터 상태로부터 forceOpen과 activeBranch를 계산하면 올바른 분기가 열리고 레일이 강조돼요.
API
TRTreeNav
| 속성 | 타입 | 기본값 | 용도 |
|---|---|---|---|
items | readonly TRTreeNavItem<T>[] | 필수 | 재귀 트리 데이터예요. |
renderLeaf | (item, state) => ReactNode | 필수 | 리프 노드를 렌더링해요. state에 depth가 담겨요. |
renderGroupLabel | (item, state) => ReactNode | 그룹 label | 선택적 커스텀 그룹 라벨 콘텐츠예요. |
defaultGroupsOpen | boolean | false | 활성 분기를 포함하지 않는 그룹도 열어요. |
label | string | 'Navigation' | 내비게이션 랜드마크의 접근성 이름이에요. |
TRTreeNav는 기본 nav 속성과 className, style, 이벤트, data 속성, React 19 ref도 전달해요.
TRTreeNavItem
group 노드는 key, label, 재귀 children, 그리고 선택적 forceOpen과 activeBranch를 가져요. leaf 노드는 key와 renderLeaf에 전달되는 제네릭 data 페이로드를 가져요. 내보내는 타입은 TRTreeNavItem, TRTreeNavGroup, TRTreeNavLeaf, TRTreeNavProps예요.
스타일
core 토큰 다음에 @tinyrack/ui/components/tree-nav.css를 가져와요. --tr-tree-nav-rail-color, --tr-tree-nav-indent를 재정의해 가이드 레일과 깊이 들여쓰기를 조정해요.