Tree
계층 구조 데이터를 트리 형태로 표시하는 컴포넌트입니다. 연결선·컴팩트·체크박스 등 다양한 유형을 지원합니다.
기본
tree_toggle으로 노드를 펼치고 접습니다. tree_bordered로 테두리를 추가할 수 있습니다.
- src
- components
- button.html
- card.html
- index.html
- public
간단
아이콘 없이 텍스트만 표시하는 트리입니다.
- 전자기기
- 노트북
- 스마트폰
- 의류
연결선
tree_lines로 노드 간 연결 가이드라인을 표시합니다. 조직도·파일 탐색기에 적합합니다.
- 개발본부
- 프론트엔드팀
- 홍길동
- 김철수
- 백엔드팀
- 디자인본부
컴팩트
tree_compact로 행 높이와 간격을 줄여 밀도 높은 목록을 표시합니다.
- 관리자
- 사용자 관리
- 설정 변경
- 로그 조회
- 편집자
- 뷰어
+/− 토글
tree_toggle-plus로 화살표 대신 +/− 아이콘 토글을 사용합니다.
- 가이드
- 시작하기
- 설치
- 빠른 시작
- 컴포넌트
체크박스
tree_check로 다중 선택 트리를 구성합니다. 부모·자식 노드에 체크박스를 배치할 수 있습니다.
- 대시보드
- 조회
- 보내기
- 설정
메타 · 배지
tree_meta로 파일 크기·항목 수 등 보조 정보를 표시합니다.
- assets
- logo.png
- hero.jpg
- styles.css
- package.json
비활성
tree_row에 is-disabled를 적용해 선택·상호작용을 막습니다.
- 기본 기능
- 대시보드
- 고급 분석 (Pro)
- API 연동 (Enterprise)
- 베타 기능
선택 가능
tree_link로 행 전체를 클릭 가능하게 만듭니다. is-selected로 현재 선택 항목을 표시합니다.
API · Tree Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
bordered | boolean | false | 테두리 (tree_bordered) |
lines | boolean | false | 연결선 (tree_lines) |
compact | boolean | false | 좁은 행 높이 (tree_compact) |
ariaLabel | string | — | 트리 접근성 라벨 (권장) |
multiselectable | boolean | false | 다중 선택 aria-multiselectable |
className | string | — | tree 루트에 추가 클래스 |
API · TreeNode Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
label | string | — | 노드 라벨 (tree_label) |
expanded | boolean | — | 펼침 상태 (aria-expanded) |
selected | boolean | false | 선택 상태 (is-selected · aria-selected) |
disabled | boolean | false | 비활성 상태 및 상호작용 차단 (is-disabled · aria-disabled) |
expandable | boolean | false | 토글 버튼 강제 표시 |
plusToggle | boolean | false | + / − 토글 (tree_toggle-plus) |
toggleLabel | string | — | 토글 버튼 aria-label |
link | boolean | false | 클릭 가능 행 (tree_link) |
meta | string | — | 우측 메타 텍스트 (tree_meta) |
onExpandedChange | (expanded: boolean) => void | — | 펼침 상태가 변경될 때 호출되는 React 콜백 |
className | string | — | tree_item에 추가 클래스 |
ripple | boolean | true | 클릭 파장(ripple). true 시 자식 클릭 표면에 data-ripple · false 시 data-no-ripple으로 하위 전체 비활성 |
API · Tree Children
| Children | 설명 |
|---|---|
children | TreeNode를 전달하는 React children |
API · TreeNode Children
| Children / Prop | 설명 |
|---|---|
prefix | 토글 앞 체크박스 등으로 전달하는 React 노드 |
icon | 라벨 앞 아이콘으로 전달하는 React 노드 (tree_icon) |
label | 라벨 텍스트 (label prop 대체) |
labelSlot | label prop을 대체하는 커스텀 React 노드 |
meta | 우측 메타 텍스트 prop |
metaSlot | meta prop을 대체하는 우측 React 노드 |
children | 중첩 트리를 구성하는 하위 TreeNode children |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
tree | 트리 루트·중첩 ul |
tree_bordered · tree_lines · tree_compact | 스타일 변형 |
tree_item · tree_row | 노드 구조 |
tree_toggle · tree_toggle-plus · tree_toggle_placeholder | 펼침 토글 |
tree_label · tree_link · tree_meta · tree_icon | 행 파트 |
is-selected · is-disabled | 상태 |
data-ripple | 클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용 |
data-ripple="false" | 해당 요소 ripple 비활성 |
data-no-ripple | 하위 전체 ripple 비활성 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--tree-indent | 1.25rem | 들여쓰기 |
--tree-row-height · --tree-font-size | 2rem · var(--text-size-sm) | 행 높이·글자 |
--tree-toggle-size · --tree-gap | 1.25rem · 2px | 토글·간격 |
--tree-line-color | var(--color-border) | 연결선 색 |