Elements

Reference

Tree View

TreeView, dressed in the paper-and-ink system: quiet rows where selection is pure light on the paper, one hairline plumb line per depth, and branches that swing open on the spring. The parts — Root, Label, Tree, NodeProvider, NodeContext, Branch, BranchControl, BranchTrigger, BranchIndicator, BranchText, BranchContent, BranchIndentGuide, Item, ItemText, ItemIndicator, NodeCheckbox, NodeRenameInput, plus createTreeCollection.

Branch · BranchContent · BranchControl · BranchIndentGuide · BranchIndicator · BranchText · BranchTrigger · Item · ItemIndicator · ItemText · Label · NodeCheckbox · NodeRenameInput · Root · Tree

#BranchContent

A styled part — no props of its own; it takes the anatomy's shared styling.

#BranchControl

A styled part — no props of its own; it takes the anatomy's shared styling.

#BranchIndentGuide

A styled part — no props of its own; it takes the anatomy's shared styling.

#BranchIndicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#BranchText

A styled part — no props of its own; it takes the anatomy's shared styling.

#BranchTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Branch

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemIndicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemText

A styled part — no props of its own; it takes the anatomy's shared styling.

#Item

A styled part — no props of its own; it takes the anatomy's shared styling.

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#NodeCheckboxIndicator

PropTypeDefaultDescription
fallbackunknown—
indeterminateunknown—

#NodeCheckbox

A styled part — no props of its own; it takes the anatomy's shared styling.

#NodeContext

A styled part — no props of its own; it takes the anatomy's shared styling.

#NodeProvider

PropTypeDefaultDescription
indexPathnumber[]The index path of the tree node
nodeTreeNodeThe tree node
nodeT—

#NodeRenameInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

PropTypeDefaultDescription
sizeString as PropType<"sm" | "md" | "lg">"md"One rung of the row register: the rows' breathing room follows it.
canRename(node: T, indexPath: number[]) => booleanFunction to determine if a node can be renamed
checkedValuestring[]The controlled checked node values
collectionTreeCollection<T>The collection of tree nodes
defaultCheckedValuestring[]The initial checked node values when rendered. Use when you don't need to control the checked node values.
defaultExpandedValuestring[]The initial expanded node values when rendered. Use when you don't need to control the expanded node values.
defaultFocusedValuestringThe initial focused node value when rendered. Use when you don't need to control the focused node value.
defaultSelectedValuestring[]The initial selected node values when rendered. Use when you don't need to control the selected node values.
expandedValuestring[]The controlled expanded node values
expandOnClickbooleantrueWhether clicking on a branch should open it or not
focusedValuestringThe id of the focused node
idstringThe unique identifier of the machine.
idsPartial<{ root: string; tree: string; label: string; node(value: string): string; }>The ids of the tree elements. Useful for composition.
loadChildren(details: treeView.LoadChildrenDetails<T>) => Promise<T[]>A function that loads the children of a node.
selectedValuestring[]The controlled selected node values
selectionMode'single' | 'multiple'"single"Whether the tree supports multiple selection - "single": only one node can be selected - "multiple": multiple nodes can be selected
translationstreeView.IntlTranslationsSpecifies the localized strings that identifies the accessibility elements and their states
typeaheadbooleantrueWhether the tree supports typeahead search
EventPayload
focusChangedetails: FocusChangeDetails<any>
checkedChangedetails: CheckedChangeDetails
update:focusedValuevalue: string | null
expandedChangedetails: ExpandedChangeDetails<any>
selectionChangedetails: SelectionChangeDetails<any>
loadChildrenCompletedetails: LoadChildrenCompleteDetails<T>
loadChildrenErrordetails: LoadChildrenErrorDetails<T>
renameStartdetails: RenameStartDetails<T>
beforeRenamedetails: RenameCompleteDetails
renameCompletedetails: RenameCompleteDetails
update:expandedValuevalue: string[]
update:selectedValuevalue: string[]
update:checkedValuevalue: string[]

#Tree

A styled part — no props of its own; it takes the anatomy's shared styling.