Skip to main content

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
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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,});

Additional resources#