Tree

• src
  • components
    • Button.tsx
    • Tree.tsx
  • index.ts
• package.json

계약

Overview

Machine-readable contract from Component Spec.

component: treeexport: Treeversion: 1attributes: data-refineui=tree

Anatomy

Part	data-refineui
root	tree
item	tree-item
item_chevron	tree-item-chevron
item_content	tree-item-content
item_main	tree-item-main
item_panel	tree-item-panel
item_trigger	tree-item-trigger

Variants

Axis	Values
size	sm, md, lg

States

Scope	Category	Values
component	pseudo	focus-visible
component	environment	forced-colors, dir

Accessibility

Slot	Element	Role	Required attributes
tree	div	tree	—
tree-item	div	treeitem	aria-selected: required=true, type: boolean
tree-item-trigger	button	—	—

Keyboard

Key	Action	Native
ArrowDown	next-trigger	—
ArrowUp	previous-trigger	—
Home	first-trigger	—
End	last-trigger	—
Enter	activate	true
Space	activate	true

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible
behavior	roving	true

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { Tree, TreeItem, TreeItemContent, TreeItemTrigger } from "@refineui/react";

<Tree defaultExpanded={["src"]} defaultSelected="button">
  <TreeItem value="src">
    <TreeItemTrigger>src</TreeItemTrigger>
    <TreeItemContent>
      <TreeItem value="button">
        <TreeItemTrigger>Button.tsx</TreeItemTrigger>
      </TreeItem>
    </TreeItemContent>
  </TreeItem>
  <TreeItem value="package">
    <TreeItemTrigger>package.json</TreeItemTrigger>
  </TreeItem>
</Tree>

Foundation spacing, radius, color 별칭, typography 토큰으로 구성됩니다(Sidebar / Menu와 동일한 밀도). 셰브론으로 분기를 펼치고, 행 클릭으로 선택합니다. 화살표 키는 WAI-ARIA tree 패턴을 따릅니다.

API 레퍼런스

Tree

Prop	Default	Type	Description
size	"md"	"sm" | "md" | "lg"	행 typography 크기.
expanded	—	string[]	제어형 펼친 항목 값.
defaultExpanded	—	string[]	비제어형 초기 펼침 값.
onExpandedChange	—	(value: string[]) => void	펼침이 변경될 때 호출됩니다.
selected	—	string | null	제어형 선택 항목 값.
defaultSelected	—	string	비제어형 초기 선택.
onSelectedChange	—	(value: string | null) => void	선택이 변경될 때 호출됩니다.

TreeItem

Prop	Default	Type	Description
value	—	string	고유 식별자(필수).
disabled	false	boolean	선택과 펼침을 비활성화합니다.

TreeItemTrigger

포커스 가능한 행 레이블. 항목에 TreeItemContent가 있으면 셰브론을 표시합니다.

TreeItemContent

중첩 TreeItem 그룹. 부모가 펼쳐진 동안에만 마운트됩니다.