TreeItem

An item within a <Tree>

Code

<script lang="ts">
    import { TreeItem } from '@geoffcox/sterling-svelte';
  </script>
  
  <TreeItem text="sterling-svelte" value="item">
    <TreeItem value="child1" text="Child 1"/>
    <!-- TODO: Add more TreeItem children here -->
  </TreeItem>

Members

Property Name	Type	Default	Comment
disabled	boolean	false	When true, the item is disabled.
text	string \| undefined	undefined	The text for the item. Not used when either the item or label slots are filled.
value	string	undefined	The value uniquely identifying this item within the tree.
variant	string	''	Additional class names to apply

	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

By default, renders a TreeItemDisplay
A tree item is identified by having data-value and role="treeitem" properties
Includes HTMLDivElement props, event, and methods

Anatomy

<div class="sterling-tree-item">
  <div class="item">
    <slot name="item" {depth} {disabled} {expanded} {hasChildren} {selected} {value} {variant}>
      <TreeItemDisplay>
        <slot name="label" {depth} {disabled} {expanded} {hasChildren} {selected} {value} {variant}
          >{text || value}
        </slot>
      </TreeItemDisplay>
    </slot>
  </div>
  <div class="children">
    <slot {depth} {disabled} {selected} {value} {variant} />
  </div>
</div>