Tree View Experimental

The Tree View displays hierarchical data in a nested list where each item can be expanded, checked or selected. Items are composed with the TreeViewItem and TreeViewItemContent components — the tree does not accept a data prop.

• Fruits
  • Apple
  • Banana
• Vegetables

Usage

<script>
	import { TreeView, TreeViewItem, TreeViewItemContent } from 'fluentui-svelte';
</script>

<TreeView selectionMode="multiple">
	<TreeViewItem id="fruits" type="branch">
		<TreeViewItemContent>Fruits</TreeViewItemContent>
		<TreeView>
			<TreeViewItem id="apple">
				<TreeViewItemContent>Apple</TreeViewItemContent>
			</TreeViewItem>
			<TreeViewItem id="banana" disabled>
				<TreeViewItemContent>Banana</TreeViewItemContent>
			</TreeViewItem>
		</TreeView>
	</TreeViewItem>
	<TreeViewItem id="vegetables">
		<TreeViewItemContent>Vegetables</TreeViewItemContent>
	</TreeViewItem>
</TreeView>

Nesting a TreeView inside a TreeViewItem of type='branch' creates a subtree. Use openItems / checkedItems on the root TreeView (bindable) to control open and checked state programmatically.

Checkable Items

Set selectionMode="multiple" to render checkboxes on selectable items.

• Fruits
  • Apple
  • Banana

Controlling Open and Checked State

Use the bindable openItems and checkedItems props on the root TreeView to control state programmatically.

• Fruits
  • Apple
  • Banana

Component Props (TreeView)

Name	Type	Default	Description
ref bindable	HTMLUListElement		The DOM reference of the tree element.
size	'small' | 'medium' | 'large'	'medium'	The size of every item in the tree.
navigationMode	'tree' | 'treegrid'	'tree'	Whether the tree takes a single tab stop, or every row is reachable on its own.
onOpenChange	(e: Event, openItems: string[]) => void		Called whenever a branch opens or closes.
selectionMode	'single' | 'multiple'	'multiple'	How many items can be checked at a time.
onCheckedChange	(e: Event, checkedItems: string[]) => void		Called whenever an item is checked or unchecked.
virtualizer	TreeViewVirtualizer		Bridge to a windowing library. Only the rendered slice of items lives in the DOM.
openItems bindable	string[] | SvelteSet<string>		The ids of the open branches. A `SvelteSet` is required when a `virtualizer` is set.
checkedItems bindable	string[] | SvelteSet<string>		The ids of the checked items. A `SvelteSet` is required when a `virtualizer` is set.
children	Snippet		The items of the tree.
TreeViewVirtualProps | TreeViewStaticProps
Element Attributes (ul)

Component Props (TreeViewItem)

Name	Type	Default	Description
id	string		The id of the item, used by the tree to track its state. Falls back to a generated id.
type	'item' | 'branch'	'item'	Whether the item holds children, and can therefore be opened.
ref	HTMLLIElement		The DOM reference of the item element.
value	string | number	id	The value reported by the tree events. Falls back to the id of the item.
text	string		The label of the item, used by the type-ahead navigation.
open	boolean		Whether the branch is open.
checked	boolean		Whether the item is checked.
indeterminate	boolean		Renders the checkbox in its mixed state, when only some children are checked.
disabled	boolean		Disables the user interaction.
index	number		The real index of the item in the data set. Required when the tree is virtualized.
onOpenChange	(e: Event, data: { id: string; open: boolean }) => void		Called when this branch opens or closes.
onCheckedChange	(e: Event, data: { id: string; checked: boolean }) => void		Called when this item is checked or unchecked.
Element Attributes (li)

Component Props (TreeViewItemContent)

Name	Type	Default	Description
ref	HTMLDivElement		The DOM reference of the layout element.
expandIcon	Snippet | Component		Custom icon for the control that opens a branch.
iconBefore	Snippet | Component		Content rendered before the label.
iconAfter	Snippet | Component		Content rendered after the label.
aside	Snippet | Component		Content pinned to the end of the row.
actions	Snippet | Component		Content pinned to the end of the row, revealed on hover and on focus.
Element Attributes (div)