Tree

계층 구조 데이터를 트리 형태로 표시하는 컴포넌트입니다. 연결선·컴팩트·체크박스 등 다양한 유형을 지원합니다.

기본

tree_toggle으로 노드를 펼치고 접습니다. tree_bordered로 테두리를 추가할 수 있습니다.

아이콘 없이 텍스트만 표시하는 트리입니다.

tree_lines로 노드 간 연결 가이드라인을 표시합니다. 조직도·파일 탐색기에 적합합니다.

tree_compact로 행 높이와 간격을 줄여 밀도 높은 목록을 표시합니다.

tree_toggle-plus로 화살표 대신 +/− 아이콘 토글을 사용합니다.

tree_check로 다중 선택 트리를 구성합니다. 부모·자식 노드에 체크박스를 배치할 수 있습니다.

tree_meta로 파일 크기·항목 수 등 보조 정보를 표시합니다.

tree_row에 is-disabled를 적용해 선택·상호작용을 막습니다.

tree_link로 행 전체를 클릭 가능하게 만듭니다. is-selected로 현재 선택 항목을 표시합니다.

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	토글 버튼 강제 표시
`plus-toggle`	boolean	false	+ / − 토글 (tree_toggle-plus)
`toggle-label`	string	—	토글 버튼 aria-label
`link`	boolean	false	클릭 가능 행 (tree_link)
`meta`	string	—	우측 메타 (tree_meta)
`ripple`	boolean	true	클릭 파장(ripple). true 시 자식 클릭 표면에 data-ripple · false 시 data-no-ripple으로 하위 전체 비활성

슬롯	설명
`default`	TreeNode 자식

Vue 컴포넌트가 렌더하는 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)	연결선 색