Tree

A hierarchy of items that can be expanded/collapsed and 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 \| null \| undefined	false	When true, the tree and its descendants are disabled.
selectedValue	string \| undefined	undefined	The value of the currently selected item.
expandedValues	string[] \| undefined	[ ]	The values of items that are expanded.
onExpandCollapse	(expandedValues: string) => null	undefined	Called when any item in the hierarchy is expanded or collapsed.
onSelect	(selectedValue: string) => null	undefined	Called when any item in the hierarchy is selected.

Considerations

Includes HTMLDivElement props, events, and methods.

Anatomy

tree (<div>)
  children (Snippet)