Tree

• Docs
• API

Tag name: <vscode-tree>

Properties

expandMode

Name	expandMode
Attribute	expand-mode
Type	'singleClick' | 'doubleClick'
Default	'singleClick'
Description	Controls how tree folders are expanded when clicked. This property is designed to use the workbench.tree.expandMode setting. Valid options are available as constants. import {ExpandMode} from '@vscode-elements/elements/dist/vscode-tree/vscode-tree.js'; document.querySelector('vscode-tree').expandMode = ExpandMode.singleClick;

hideArrowsreflects

Name	hideArrows
Attribute	hide-arrows
Type	boolean
Default	false
Description	Although arrows are always visible in the Tree component by default in VSCode, some icon sets (e.g., Material Icon Theme) allow disabling them in the file explorer view. This flag makes it possible to mimic that behavior.

indentreflects

Name	indent
Attribute	indent
Type	number
Default	8
Description	Controls the indentation in pixels. This property is designed to use the workbench.tree.indent setting.

indentGuidesreflects

Name	indentGuides
Attribute	indent-guides
Type	'none' | 'onHover' | 'always'
Default	'onHover'
Description	Controls whether the tree should render indent guides. This property is designed to use the workbench.tree.renderIndentGuides setting. Valid options are available as constants. import {IndentGuides} from '@vscode-elements/elements/dist/vscode-tree/vscode-tree.js'; document.querySelector('vscode-tree').expandMode = IndentGuides.onHover;

multiSelectreflects

Name	multiSelect
Attribute	multi-select
Type	boolean
Default	false
Description	Allows selecting multiple items.

versionreadonly

Name	version
Type	string
Description	VSCode Elements version

Methods

collapseAll()

Name	collapseAll
Description	Collapses all folders.

expandAll()

Name	expandAll
Description	Expands all folders.

CSS Custom Properties

--vscode-font-family

Name	--vscode-font-family
Default value	sans-serif

--vscode-font-size

Name	--vscode-font-size
Default value	13px

--vscode-font-weight

Name	--vscode-font-weight
Default value	normal

--vscode-foreground

Name	--vscode-foreground
Default value	#cccccc

--vscode-icon-foreground

Name	--vscode-icon-foreground
Default value	#cccccc

--vscode-list-focusAndSelectionOutline

Name	--vscode-list-focusAndSelectionOutline
Default value	#0078d4

--vscode-list-focusOutline

Name	--vscode-list-focusOutline
Default value	#0078d4

--vscode-list-hoverBackground

Name	--vscode-list-hoverBackground
Default value	#2a2d2e

--vscode-list-hoverForeground

Name	--vscode-list-hoverForeground
Default value	#cccccc

--vscode-tree-inactiveIndentGuidesStroke

Name	--vscode-tree-inactiveIndentGuidesStroke
Default value	rgba(88, 88, 88, 0.4)

--vscode-tree-indentGuidesStroke

Name	--vscode-tree-indentGuidesStroke
Default value	#585858