Skip to main content
Version: 1.x

fast-tree-view

As defined by the W3C:

A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children may be expanded or collapsed to show or hide the children. For example, in a file system navigator that uses a tree view to display folders and files, an item representing a folder can be expanded to reveal the contents of the folder, which may be files, folders, or both.

Setup

Basic Setup

import {
provideFASTDesignSystem,
fastTreeItem,
fastTreeView
} from "@microsoft/fast-components";

provideFASTDesignSystem()
.register(
fastTreeItem(),
fastTreeView()
);

Customizing the Glyph

import {
provideFASTDesignSystem,
fastTreeItem,
fastTreeView
} from "@microsoft/fast-components";

provideFASTDesignSystem()
.register(
fastTreeItem({
expandCollapseGlyph: `...your expand/collapse glyph`
}),
fastTreeView()
);

Usage

Live Editor
<fast-tree-view>
    Root
    <fast-tree-item>
        Item 1
        <fast-tree-item>Sub-item 1</fast-tree-item>
        <fast-tree-item>Sub-item 2</fast-tree-item>
    </fast-tree-item>
    <fast-tree-item>Item 2</fast-tree-item>
</fast-tree-view>
Result
Loading...

Create your own design

TreeItem

import {
treeItemTemplate as template,
TreeItem,
TreeItemOptions,
} from "@microsoft/fast-foundation";
import { treeItemStyles as styles } from "./my-tree-item.styles";

export const myTreeItem = TreeItem.compose<TreeItemOptions>({
baseName: "tree-item",
template,
styles,
expandCollapseGlyph: `...default expand/collapse glyph`,
});

TreeView

import { treeViewTemplate as template, TreeView } from "@microsoft/fast-foundation";
import { treeViewStyles as styles } from "./tree-view.styles";

export const myTreeView = TreeView.compose({
baseName: "tree-view",
template,
styles,
});

API

class: TreeView

Superclass

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
renderCollapsedNodespublicboolean/** When true, the control will be appear expanded by user interaction.
currentSelectedpublicHTMLElement or TreeItem or nullThe currently selected tree item
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.FoundationElement
stylespublicElementStyles or void or nullSets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.FoundationElement

Methods

NamePrivacyDescriptionParametersReturnInherited From
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Attributes

NameFieldInherited From
render-collapsed-nodesrenderCollapsedNodes

Slots

NameDescription
The default slot for tree items

Additional resources