TreeItem

An item within a tree hierarchy that can contain other items.

Code

<script lang="ts">
  import { TreeItem } from '@geoffcox/sterling-svelte';
</script>

<TreeItem label="sterling-svelte" value="item" />

Members

Property Name	Type	Bindable	Default	Comment
disabled	boolean \| null \| undefined	no	false	When true, the item and its children are disabled.
icon	Snippet \| undefined	no	undefined	The leaf or expand/collapse icon. When undefined renders TreeChevron.
label	string \| Snippet \| undefined	no	undefined	The label for the item. When undefined renders the value.
value	string	no		The value uniquely identifying this item within the tree.

	Method Name	Parameters	Return Type	Comment
	collapse			Collapses the current item.
	expand			Expands the current item.
	select			Selects the current item.
	selectParent			Selects the parent of the current item.
	selectPrevious			Selects the previous item relative to the current item.
	selectNext			Selects the next item relative to the current item.
	toggleExpanded			Toggles the expanded state of the current item.

Considerations

A tree item is identified by having data-value and role="treeitem" properties.
Includes HTMLDivElement props, events, and methods.

Anatomy

<div class="sterling-tree-item">
  <div class="item">
    {@render icon()}
    {@render label()}
  </div>
  <div class="children">
    {@render children()}
  </div>
</div>