Tree

A hierarchy of <TreeItem>s that can be expanded/collapsed where a single item can be selected

Code

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

  let expandedValues: string[] = [];
  let selectedValue: string | undefined = undefined;
</script>

<Tree bind:expandedValues bind:selectedValue>
  <!-- <TreeItem> ... -->
</List>

Members

Property Name	Type	Default	Comment
disabled	boolean	false	When true, the tree and its descendants are disabled.
selectedValue	string \| undefined	undefined	The value of the currently selected item.
expandedValues	string[]	[]	The values of items that are expanded.
variant	string	''	Additional class names to apply

	Event Name	Data	Comment
	expandCollapse	{ expandedValues: string[] }	Raised when an item is expanded or collapsed
	select	{ selectedValue: string }	Raised when an item is selected

Considerations

Includes HTMLDivElement props, event, and methods

Anatomy

<div class="sterling-tree">
  <!-- children -->
  <slot {disabled} {expandedValues} {selectedValue} {variant} />
</div>