Skip to content

Tree

To use the icons, the codicons.css file must be included in the page:

<link rel="stylesheet" href="path/to/codicon.css" id="vscode-codicon-stylesheet">

Basic example

<vscode-tree id="tree-basic-example"></vscode-tree>

Custom icons

<vscode-tree id="custom-icons-example" indent-guides arrows></vscode-tree>

Flat list

The Tree component can also be used to display lists

<vscode-tree id="list-example"></vscode-tree>

Actions

Actions are clickable icons in the tree item. When an action icon is clicked, the vsc-run-action event will be dispatched. The event data contains the action name, the value of the tree item, and the tree item itself.

<vscode-tree id="actions-example"></vscode-tree>

Decorations

Decoration is additional content on the right edge of the tree item. It can be a short text, a counter, or a small, filled circle.

<vscode-tree id="decorations-example"></vscode-tree>