Tree

A hierarchical list component for displaying nested data structures.

Show Code

<script setup lang="ts">
import { Tree, createTreeCollection } from '@destyler-ui/vue'
import TreeNode from './TreeNode.vue'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: (node) => node.id,
  nodeToString: (node) => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      {
        id: 'node_modules',
        name: 'node_modules',
        children: [
          { id: 'node_modules/destyler', name: 'destyler' },
          { id: 'node_modules/unocss', name: 'unocss' },
          {
            id: 'node_modules/@types',
            name: '@types',
            children: [
              { id: 'node_modules/@types/react', name: 'react' },
              { id: 'node_modules/@types/react-dom', name: 'react-dom' },
            ],
          },
        ],
      },
      {
        id: 'src',
        name: 'src',
        children: [
          { id: 'src/app.tsx', name: 'app.tsx' },
          { id: 'src/index.ts', name: 'index.ts' },
        ],
      },
      { id: 'uno.config', name: 'uno.config.ts' },
      { id: 'package.json', name: 'package.json' },
      { id: 'renovate.json', name: 'renovate.json' },
      { id: 'readme.md', name: 'README.md' },
    ],
  },
})
</script>

<template>
  <Tree.Root :collection="collection">
    <Tree.Label>Tree</Tree.Label>
    <Tree.Tree>
      <TreeNode
        v-for="(node, index) in collection.rootNode.children"
        :key="node.id"
        :node="node"
        :indexPath="[index]"
      />
    </Tree.Tree>
  </Tree.Root>
</template>

import { createTreeCollection, Tree } from '@destyler-ui/react'
import { TreeNode } from './TreeNode'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: node => node.id,
  nodeToString: node => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      {
        id: 'node_modules',
        name: 'node_modules',
        children: [
          { id: 'node_modules/destyler', name: 'destyler' },
          { id: 'node_modules/unocss', name: 'unocss' },
          {
            id: 'node_modules/@types',
            name: '@types',
            children: [
              { id: 'node_modules/@types/react', name: 'react' },
              { id: 'node_modules/@types/react-dom', name: 'react-dom' },
            ],
          },
        ],
      },
      {
        id: 'src',
        name: 'src',
        children: [
          { id: 'src/app.tsx', name: 'app.tsx' },
          { id: 'src/index.ts', name: 'index.ts' },
        ],
      },
      { id: 'uno.config', name: 'uno.config.ts' },
      { id: 'package.json', name: 'package.json' },
      { id: 'renovate.json', name: 'renovate.json' },
      { id: 'readme.md', name: 'README.md' },
    ],
  },
})

export function Basic() {
  return (
    <Tree.Root collection={collection}>
      <Tree.Label>Tree</Tree.Label>
      <Tree.Tree>
        {collection.rootNode.children?.map((node, index) => (
          <TreeNode
            key={node.id}
            node={node}
            indexPath={[index]}
          />
        ))}
      </Tree.Tree>
    </Tree.Root>
  )
}

import { createTreeCollection, Tree } from '@destyler-ui/solid/tree'
import { CheckSquareIcon, ChevronRightIcon, FileIcon, FolderIcon } from 'lucide-solid'
import { For, Show } from 'solid-js'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: node => node.id,
  nodeToString: node => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      {
        id: 'node_modules',
        name: 'node_modules',
        children: [
          { id: 'node_modules/zag-js', name: 'zag-js' },
          { id: 'node_modules/pandacss', name: 'panda' },
          {
            id: 'node_modules/@types',
            name: '@types',
            children: [
              { id: 'node_modules/@types/react', name: 'react' },
              { id: 'node_modules/@types/react-dom', name: 'react-dom' },
            ],
          },
        ],
      },
      {
        id: 'src',
        name: 'src',
        children: [
          { id: 'src/app.tsx', name: 'app.tsx' },
          { id: 'src/index.ts', name: 'index.ts' },
        ],
      },
      { id: 'panda.config', name: 'panda.config.ts' },
      { id: 'package.json', name: 'package.json' },
      { id: 'renovate.json', name: 'renovate.json' },
      { id: 'readme.md', name: 'README.md' },
    ],
  },
})

export function Basic() {
  return (
    <Tree.Root collection={collection}>
      <Tree.Label>Tree</Tree.Label>
      <Tree.Tree>
        <For each={collection.rootNode.children}>
          {(node, index) => <TreeNode node={node} indexPath={[index()]} />}
        </For>
      </Tree.Tree>
    </Tree.Root>
  )
}

function TreeNode(props: Tree.NodeProviderProps<Node>) {
  const { node, indexPath } = props
  return (
    <Tree.NodeProvider node={node} indexPath={indexPath}>
      <Show
        when={node.children}
        fallback={(
          <Tree.Item>
            <Tree.ItemIndicator>
              <CheckSquareIcon />
            </Tree.ItemIndicator>
            <Tree.ItemText>
              <FileIcon />
              {node.name}
            </Tree.ItemText>
          </Tree.Item>
        )}
      >
        <Tree.Branch>
          <Tree.BranchControl>
            <Tree.BranchText>
              <FolderIcon /> {node.name}
            </Tree.BranchText>
            <Tree.BranchIndicator>
              <ChevronRightIcon />
            </Tree.BranchIndicator>
          </Tree.BranchControl>
          <Tree.BranchContent>
            <Tree.BranchIndentGuide />
            <For each={node.children}>
              {(child, index) => <TreeNode node={child} indexPath={[...indexPath, index()]} />}
            </For>
          </Tree.BranchContent>
        </Tree.Branch>
      </Show>
    </Tree.NodeProvider>
  )
}

<script lang="ts">
  import { Tree, createTreeCollection } from '@destyler-ui/svelte'
  import TreeNode from './TreeNode.svelte'

  interface Node {
    id: string
    name: string
    children?: Node[]
  }

  const collection = createTreeCollection<Node>({
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'node_modules',
          name: 'node_modules',
          children: [
            { id: 'node_modules/destyler', name: 'destyler' },
            { id: 'node_modules/unocss', name: 'unocss' },
            {
              id: 'node_modules/@types',
              name: '@types',
              children: [
                { id: 'node_modules/@types/react', name: 'react' },
                { id: 'node_modules/@types/react-dom', name: 'react-dom' },
              ],
            },
          ],
        },
        {
          id: 'src',
          name: 'src',
          children: [
            { id: 'src/app.tsx', name: 'app.tsx' },
            { id: 'src/index.ts', name: 'index.ts' },
          ],
        },
        { id: 'uno.config', name: 'uno.config.ts' },
        { id: 'package.json', name: 'package.json' },
        { id: 'renovate.json', name: 'renovate.json' },
        { id: 'readme.md', name: 'README.md' },
      ],
    },
  })
</script>

<Tree.Root {collection}>
  <Tree.Label>Tree</Tree.Label>
  <Tree.Tree>
    {#each collection.rootNode.children ?? [] as node, index (node.id)}
      <TreeNode {node} indexPath={[index]} />
    {/each}
  </Tree.Tree>
</Tree.Root>

Anatomy

<script setup lang="ts">
import { Tree } from '@destyler-ui/vue'
</script>

<template>
  <Tree.Root>
    <Tree.Label />
    <Tree.Tree>
      <Tree.Item>
        <Tree.ItemIndicator />
        <Tree.ItemText />
      </Tree.Item>
      <Tree.Branch>
        <Tree.BranchControl>
          <Tree.BranchTrigger />
          <Tree.BranchText />
          <Tree.BranchIndicator />
        </Tree.BranchControl>
        <Tree.BranchContent>
          <Tree.BranchIndentGuide />
          <Tree.Item>
            <Tree.ItemText />
          </Tree.Item>
        </Tree.BranchContent>
      </Tree.Branch>
    </Tree.Tree>
  </Tree.Root>
</template>

import { Tree } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Tree.Root>
      <Tree.Label />
      <Tree.Tree>
        <Tree.Item>
          <Tree.ItemIndicator />
          <Tree.ItemText />
        </Tree.Item>
        <Tree.Branch>
          <Tree.BranchControl>
            <Tree.BranchTrigger />
            <Tree.BranchText />
            <Tree.BranchIndicator />
          </Tree.BranchControl>
          <Tree.BranchContent>
            <Tree.BranchIndentGuide />
            <Tree.Item>
              <Tree.ItemText />
            </Tree.Item>
          </Tree.BranchContent>
        </Tree.Branch>
      </Tree.Tree>
    </Tree.Root>
  )
}

import { createTreeCollection, Tree } from '@destyler-ui/solid'
import { For, Show } from 'solid-js'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: node => node.id,
  nodeToString: node => node.name,
  rootNode: {
    id: 'root',
    name: '',
    children: [
      {
        id: 'src',
        name: 'src',
        children: [{ id: 'src/index.ts', name: 'index.ts' }],
      },
      { id: 'package.json', name: 'package.json' },
    ],
  },
})

export default function Basic() {
  return (
    <Tree.Root collection={collection}>
      <Tree.Label>Files</Tree.Label>
      <Tree.Tree>
        <For each={collection.rootNode.children}>
          {(node, index) => <TreeNode node={node} indexPath={[index()]} />}
        </For>
      </Tree.Tree>
    </Tree.Root>
  )
}

function TreeNode(props: Tree.NodeProviderProps<Node>) {
  return (
    <Tree.NodeProvider node={props.node} indexPath={props.indexPath}>
      <Show
        when={props.node.children}
        fallback={(
          <Tree.Item>
            <Tree.ItemText>{props.node.name}</Tree.ItemText>
          </Tree.Item>
        )}
      >
        <Tree.Branch>
          <Tree.BranchControl>
            <Tree.BranchTrigger />
            <Tree.BranchText>{props.node.name}</Tree.BranchText>
            <Tree.BranchIndicator />
          </Tree.BranchControl>
          <Tree.BranchContent>
            <Tree.BranchIndentGuide />
            <For each={props.node.children}>
              {(child, index) => (
                <TreeNode node={child} indexPath={[...props.indexPath, index()]} />
              )}
            </For>
          </Tree.BranchContent>
        </Tree.Branch>
      </Show>
    </Tree.NodeProvider>
  )
}

<script lang="ts">
  import { Tree, createTreeCollection } from '@destyler-ui/svelte'

  interface Node {
    id: string
    name: string
    children?: Node[]
  }

  const collection = createTreeCollection<Node>({
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'src',
          name: 'src',
          children: [
            { id: 'src/app.svelte', name: 'app.svelte' },
            { id: 'src/index.ts', name: 'index.ts' },
          ],
        },
        { id: 'package.json', name: 'package.json' },
      ],
    },
  })
</script>

{#snippet renderNode(node: Node, indexPath: number[])}
  <Tree.NodeProvider {node} {indexPath}>
    {#if node.children}
      <Tree.Branch>
        <Tree.BranchControl>
          <Tree.BranchTrigger>
            <Tree.BranchText>{node.name}</Tree.BranchText>
            <Tree.BranchIndicator>▶</Tree.BranchIndicator>
          </Tree.BranchTrigger>
        </Tree.BranchControl>
        <Tree.BranchContent>
          <Tree.BranchIndentGuide />
          {#each node.children as child, index (child.id)}
            {@render renderNode(child, [...indexPath, index])}
          {/each}
        </Tree.BranchContent>
      </Tree.Branch>
    {:else}
      <Tree.Item>
        <Tree.ItemIndicator>•</Tree.ItemIndicator>
        <Tree.ItemText>{node.name}</Tree.ItemText>
      </Tree.Item>
    {/if}
  </Tree.NodeProvider>
{/snippet}

<Tree.Root {collection}>
  <Tree.Label>Tree</Tree.Label>
  <Tree.Tree>
    {#each collection.rootNode.children ?? [] as node, index (node.id)}
      {@render renderNode(node, [index])}
    {/each}
  </Tree.Tree>
</Tree.Root>

Examples

Basic

Show Code

<script setup lang="ts">
import { Tree, createTreeCollection } from '@destyler-ui/vue'
import TreeNode from './TreeNode.vue'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: (node) => node.id,
  nodeToString: (node) => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      {
        id: 'node_modules',
        name: 'node_modules',
        children: [
          { id: 'node_modules/destyler', name: 'destyler' },
          { id: 'node_modules/unocss', name: 'unocss' },
          {
            id: 'node_modules/@types',
            name: '@types',
            children: [
              { id: 'node_modules/@types/react', name: 'react' },
              { id: 'node_modules/@types/react-dom', name: 'react-dom' },
            ],
          },
        ],
      },
      {
        id: 'src',
        name: 'src',
        children: [
          { id: 'src/app.tsx', name: 'app.tsx' },
          { id: 'src/index.ts', name: 'index.ts' },
        ],
      },
      { id: 'uno.config', name: 'uno.config.ts' },
      { id: 'package.json', name: 'package.json' },
      { id: 'renovate.json', name: 'renovate.json' },
      { id: 'readme.md', name: 'README.md' },
    ],
  },
})
</script>

<template>
  <Tree.Root :collection="collection">
    <Tree.Label>Tree</Tree.Label>
    <Tree.Tree>
      <TreeNode
        v-for="(node, index) in collection.rootNode.children"
        :key="node.id"
        :node="node"
        :indexPath="[index]"
      />
    </Tree.Tree>
  </Tree.Root>
</template>

import { createTreeCollection, Tree } from '@destyler-ui/react'
import { TreeNode } from './TreeNode'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: node => node.id,
  nodeToString: node => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      {
        id: 'node_modules',
        name: 'node_modules',
        children: [
          { id: 'node_modules/destyler', name: 'destyler' },
          { id: 'node_modules/unocss', name: 'unocss' },
          {
            id: 'node_modules/@types',
            name: '@types',
            children: [
              { id: 'node_modules/@types/react', name: 'react' },
              { id: 'node_modules/@types/react-dom', name: 'react-dom' },
            ],
          },
        ],
      },
      {
        id: 'src',
        name: 'src',
        children: [
          { id: 'src/app.tsx', name: 'app.tsx' },
          { id: 'src/index.ts', name: 'index.ts' },
        ],
      },
      { id: 'uno.config', name: 'uno.config.ts' },
      { id: 'package.json', name: 'package.json' },
      { id: 'renovate.json', name: 'renovate.json' },
      { id: 'readme.md', name: 'README.md' },
    ],
  },
})

export function Basic() {
  return (
    <Tree.Root collection={collection}>
      <Tree.Label>Tree</Tree.Label>
      <Tree.Tree>
        {collection.rootNode.children?.map((node, index) => (
          <TreeNode
            key={node.id}
            node={node}
            indexPath={[index]}
          />
        ))}
      </Tree.Tree>
    </Tree.Root>
  )
}

import { createTreeCollection, Tree } from '@destyler-ui/solid/tree'
import { CheckSquareIcon, ChevronRightIcon, FileIcon, FolderIcon } from 'lucide-solid'
import { For, Show } from 'solid-js'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: node => node.id,
  nodeToString: node => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      {
        id: 'node_modules',
        name: 'node_modules',
        children: [
          { id: 'node_modules/zag-js', name: 'zag-js' },
          { id: 'node_modules/pandacss', name: 'panda' },
          {
            id: 'node_modules/@types',
            name: '@types',
            children: [
              { id: 'node_modules/@types/react', name: 'react' },
              { id: 'node_modules/@types/react-dom', name: 'react-dom' },
            ],
          },
        ],
      },
      {
        id: 'src',
        name: 'src',
        children: [
          { id: 'src/app.tsx', name: 'app.tsx' },
          { id: 'src/index.ts', name: 'index.ts' },
        ],
      },
      { id: 'panda.config', name: 'panda.config.ts' },
      { id: 'package.json', name: 'package.json' },
      { id: 'renovate.json', name: 'renovate.json' },
      { id: 'readme.md', name: 'README.md' },
    ],
  },
})

export function Basic() {
  return (
    <Tree.Root collection={collection}>
      <Tree.Label>Tree</Tree.Label>
      <Tree.Tree>
        <For each={collection.rootNode.children}>
          {(node, index) => <TreeNode node={node} indexPath={[index()]} />}
        </For>
      </Tree.Tree>
    </Tree.Root>
  )
}

function TreeNode(props: Tree.NodeProviderProps<Node>) {
  const { node, indexPath } = props
  return (
    <Tree.NodeProvider node={node} indexPath={indexPath}>
      <Show
        when={node.children}
        fallback={(
          <Tree.Item>
            <Tree.ItemIndicator>
              <CheckSquareIcon />
            </Tree.ItemIndicator>
            <Tree.ItemText>
              <FileIcon />
              {node.name}
            </Tree.ItemText>
          </Tree.Item>
        )}
      >
        <Tree.Branch>
          <Tree.BranchControl>
            <Tree.BranchText>
              <FolderIcon /> {node.name}
            </Tree.BranchText>
            <Tree.BranchIndicator>
              <ChevronRightIcon />
            </Tree.BranchIndicator>
          </Tree.BranchControl>
          <Tree.BranchContent>
            <Tree.BranchIndentGuide />
            <For each={node.children}>
              {(child, index) => <TreeNode node={child} indexPath={[...indexPath, index()]} />}
            </For>
          </Tree.BranchContent>
        </Tree.Branch>
      </Show>
    </Tree.NodeProvider>
  )
}

<script lang="ts">
  import { Tree, createTreeCollection } from '@destyler-ui/svelte'
  import TreeNode from './TreeNode.svelte'

  interface Node {
    id: string
    name: string
    children?: Node[]
  }

  const collection = createTreeCollection<Node>({
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'node_modules',
          name: 'node_modules',
          children: [
            { id: 'node_modules/destyler', name: 'destyler' },
            { id: 'node_modules/unocss', name: 'unocss' },
            {
              id: 'node_modules/@types',
              name: '@types',
              children: [
                { id: 'node_modules/@types/react', name: 'react' },
                { id: 'node_modules/@types/react-dom', name: 'react-dom' },
              ],
            },
          ],
        },
        {
          id: 'src',
          name: 'src',
          children: [
            { id: 'src/app.tsx', name: 'app.tsx' },
            { id: 'src/index.ts', name: 'index.ts' },
          ],
        },
        { id: 'uno.config', name: 'uno.config.ts' },
        { id: 'package.json', name: 'package.json' },
        { id: 'renovate.json', name: 'renovate.json' },
        { id: 'readme.md', name: 'README.md' },
      ],
    },
  })
</script>

<Tree.Root {collection}>
  <Tree.Label>Tree</Tree.Label>
  <Tree.Tree>
    {#each collection.rootNode.children ?? [] as node, index (node.id)}
      <TreeNode {node} indexPath={[index]} />
    {/each}
  </Tree.Tree>
</Tree.Root>

Controlled

Control the selected and expanded values of the tree programmatically.

Show Code

<script setup lang="ts">
import { Tree, createTreeCollection } from '@destyler-ui/vue'
import TreeNode from './TreeNode.vue'
import { ref } from 'vue'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: (node) => node.id,
  nodeToString: (node) => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      {
        id: 'node_modules',
        name: 'node_modules',
        children: [
          { id: 'node_modules/destyler', name: 'destyler' },
          { id: 'node_modules/unocss', name: 'unocss' },
          {
            id: 'node_modules/@types',
            name: '@types',
            children: [
              { id: 'node_modules/@types/react', name: 'react' },
              { id: 'node_modules/@types/react-dom', name: 'react-dom' },
            ],
          },
        ],
      },
      {
        id: 'src',
        name: 'src',
        children: [
          { id: 'src/app.tsx', name: 'app.tsx' },
          { id: 'src/index.ts', name: 'index.ts' },
        ],
      },
      { id: 'uno.config', name: 'uno.config.ts' },
      { id: 'package.json', name: 'package.json' },
      { id: 'renovate.json', name: 'renovate.json' },
      { id: 'readme.md', name: 'README.md' },
    ],
  },
})

const selectedValue = ref(['src'])
const expandedValue = ref(['src'])
</script>

<template>
  <output>{{ selectedValue.join(', ') }}</output>
  <Tree.Root
    :collection="collection"
    v-model:selected-value="selectedValue"
    v-model:expanded-value="expandedValue"
  >
    <Tree.Label>Tree</Tree.Label>
    <Tree.Tree>
      <TreeNode
        v-for="(node, index) in collection.rootNode.children"
        :key="node.id"
        :node="node"
        :indexPath="[index]"
      />
    </Tree.Tree>
  </Tree.Root>
</template>

import { useState } from 'react'
import { createTreeCollection, Tree } from '@destyler-ui/react'
import { TreeNode } from './TreeNode'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: node => node.id,
  nodeToString: node => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      {
        id: 'node_modules',
        name: 'node_modules',
        children: [
          { id: 'node_modules/destyler', name: 'destyler' },
          { id: 'node_modules/unocss', name: 'unocss' },
          {
            id: 'node_modules/@types',
            name: '@types',
            children: [
              { id: 'node_modules/@types/react', name: 'react' },
              { id: 'node_modules/@types/react-dom', name: 'react-dom' },
            ],
          },
        ],
      },
      {
        id: 'src',
        name: 'src',
        children: [
          { id: 'src/app.tsx', name: 'app.tsx' },
          { id: 'src/index.ts', name: 'index.ts' },
        ],
      },
      { id: 'uno.config', name: 'uno.config.ts' },
      { id: 'package.json', name: 'package.json' },
      { id: 'renovate.json', name: 'renovate.json' },
      { id: 'readme.md', name: 'README.md' },
    ],
  },
})

export function Controlled() {
  const [selectedValue, setSelectedValue] = useState(['src'])
  const [expandedValue, setExpandedValue] = useState(['src'])

  return (
    <>
      <output>{selectedValue.join(', ')}</output>
      <Tree.Root
        collection={collection}
        selectedValue={selectedValue}
        expandedValue={expandedValue}
        onSelectionChange={details => setSelectedValue(details.selectedValue)}
        onExpandedChange={details => setExpandedValue(details.expandedValue)}
      >
        <Tree.Label>Tree</Tree.Label>
        <Tree.Tree>
          {collection.rootNode.children?.map((node, index) => (
            <TreeNode
              key={node.id}
              node={node}
              indexPath={[index]}
            />
          ))}
        </Tree.Tree>
      </Tree.Root>
    </>
  )
}

import { createTreeCollection, Tree } from '@destyler-ui/solid/tree'
import { createSignal, For } from 'solid-js'
import { TreeNode } from './TreeNode'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: node => node.id,
  nodeToString: node => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      {
        id: 'node_modules',
        name: 'node_modules',
        children: [
          { id: 'node_modules/destyler', name: 'destyler' },
          { id: 'node_modules/unocss', name: 'unocss' },
          {
            id: 'node_modules/@types',
            name: '@types',
            children: [
              { id: 'node_modules/@types/react', name: 'react' },
              { id: 'node_modules/@types/react-dom', name: 'react-dom' },
            ],
          },
        ],
      },
      {
        id: 'src',
        name: 'src',
        children: [
          { id: 'src/app.tsx', name: 'app.tsx' },
          { id: 'src/index.ts', name: 'index.ts' },
        ],
      },
      { id: 'uno.config', name: 'uno.config.ts' },
      { id: 'package.json', name: 'package.json' },
      { id: 'renovate.json', name: 'renovate.json' },
      { id: 'readme.md', name: 'README.md' },
    ],
  },
})

export function Controlled() {
  const [selectedValue, setSelectedValue] = createSignal(['src'])
  const [expandedValue, setExpandedValue] = createSignal(['src'])

  return (
    <>
      <output>{selectedValue().join(', ')}</output>
      <Tree.Root
        collection={collection}
        selectedValue={selectedValue()}
        expandedValue={expandedValue()}
        onSelectionChange={details => setSelectedValue(details.selectedValue)}
        onExpandedChange={details => setExpandedValue(details.expandedValue)}
      >
        <Tree.Label>Tree</Tree.Label>
        <Tree.Tree>
          <For each={collection.rootNode.children}>
            {(node, index) => <TreeNode node={node} indexPath={[index()]} />}
          </For>
        </Tree.Tree>
      </Tree.Root>
    </>
  )
}

<script lang="ts">
  import { Tree, createTreeCollection } from '@destyler-ui/svelte'
  import TreeNode from './TreeNode.svelte'

  interface Node {
    id: string
    name: string
    children?: Node[]
  }

  const collection = createTreeCollection<Node>({
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'node_modules',
          name: 'node_modules',
          children: [
            { id: 'node_modules/destyler', name: 'destyler' },
            { id: 'node_modules/unocss', name: 'unocss' },
            {
              id: 'node_modules/@types',
              name: '@types',
              children: [
                { id: 'node_modules/@types/react', name: 'react' },
                { id: 'node_modules/@types/react-dom', name: 'react-dom' },
              ],
            },
          ],
        },
        {
          id: 'src',
          name: 'src',
          children: [
            { id: 'src/app.tsx', name: 'app.tsx' },
            { id: 'src/index.ts', name: 'index.ts' },
          ],
        },
        { id: 'uno.config', name: 'uno.config.ts' },
        { id: 'package.json', name: 'package.json' },
        { id: 'renovate.json', name: 'renovate.json' },
        { id: 'readme.md', name: 'README.md' },
      ],
    },
  })

  let selectedValue = $state(['src'])
  let expandedValue = $state(['src'])
</script>

<output>{selectedValue.join(', ')}</output>
<Tree.Root {collection} bind:selectedValue bind:expandedValue>
  <Tree.Label>Tree</Tree.Label>
  <Tree.Tree>
    {#each collection.rootNode.children ?? [] as node, index (node.id)}
      <TreeNode {node} indexPath={[index]} />
    {/each}
  </Tree.Tree>
</Tree.Root>

Initial Value

Seed selection and expansion with defaultSelectedValue / defaultExpandedValue.

Show Code

<script setup lang="ts">
import { Tree, createTreeCollection } from '@destyler-ui/vue'
import TreeNode from './TreeNode.vue'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: (node) => node.id,
  nodeToString: (node) => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      {
        id: 'node_modules',
        name: 'node_modules',
        children: [
          { id: 'node_modules/destyler', name: 'destyler' },
          { id: 'node_modules/unocss', name: 'unocss' },
          {
            id: 'node_modules/@types',
            name: '@types',
            children: [
              { id: 'node_modules/@types/react', name: 'react' },
              { id: 'node_modules/@types/react-dom', name: 'react-dom' },
            ],
          },
        ],
      },
      {
        id: 'src',
        name: 'src',
        children: [
          { id: 'src/app.tsx', name: 'app.tsx' },
          { id: 'src/index.ts', name: 'index.ts' },
        ],
      },
      { id: 'uno.config', name: 'uno.config.ts' },
      { id: 'package.json', name: 'package.json' },
      { id: 'renovate.json', name: 'renovate.json' },
      { id: 'readme.md', name: 'README.md' },
    ],
  },
})

</script>

<template>
  <Tree.Root
    :collection="collection"
    :default-selected-value="['src']"
    :default-expanded-value="['node_modules', 'src']"
  >
    <Tree.Label>Tree</Tree.Label>
    <Tree.Tree>
      <TreeNode
        v-for="(node, index) in collection.rootNode.children"
        :key="node.id"
        :node="node"
        :indexPath="[index]"
      />
    </Tree.Tree>
  </Tree.Root>
</template>

import { createTreeCollection, Tree } from '@destyler-ui/react'
import { TreeNode } from './TreeNode'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: node => node.id,
  nodeToString: node => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      {
        id: 'node_modules',
        name: 'node_modules',
        children: [
          { id: 'node_modules/destyler', name: 'destyler' },
          { id: 'node_modules/unocss', name: 'unocss' },
          {
            id: 'node_modules/@types',
            name: '@types',
            children: [
              { id: 'node_modules/@types/react', name: 'react' },
              { id: 'node_modules/@types/react-dom', name: 'react-dom' },
            ],
          },
        ],
      },
      {
        id: 'src',
        name: 'src',
        children: [
          { id: 'src/app.tsx', name: 'app.tsx' },
          { id: 'src/index.ts', name: 'index.ts' },
        ],
      },
      { id: 'uno.config', name: 'uno.config.ts' },
      { id: 'package.json', name: 'package.json' },
      { id: 'renovate.json', name: 'renovate.json' },
      { id: 'readme.md', name: 'README.md' },
    ],
  },
})

export function InitialValue() {
  return (
    <Tree.Root
      collection={collection}
      defaultSelectedValue={['src']}
      defaultExpandedValue={['node_modules', 'src']}
    >
      <Tree.Label>Tree</Tree.Label>
      <Tree.Tree>
        {collection.rootNode.children?.map((node, index) => (
          <TreeNode
            key={node.id}
            node={node}
            indexPath={[index]}
          />
        ))}
      </Tree.Tree>
    </Tree.Root>
  )
}

import { createTreeCollection, Tree } from '@destyler-ui/solid/tree'
import { For } from 'solid-js'
import { TreeNode } from './TreeNode'

interface Node {
  id: string
  name: string
  children?: Node[]
}

const collection = createTreeCollection<Node>({
  nodeToValue: node => node.id,
  nodeToString: node => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      {
        id: 'node_modules',
        name: 'node_modules',
        children: [
          { id: 'node_modules/destyler', name: 'destyler' },
          { id: 'node_modules/unocss', name: 'unocss' },
          {
            id: 'node_modules/@types',
            name: '@types',
            children: [
              { id: 'node_modules/@types/react', name: 'react' },
              { id: 'node_modules/@types/react-dom', name: 'react-dom' },
            ],
          },
        ],
      },
      {
        id: 'src',
        name: 'src',
        children: [
          { id: 'src/app.tsx', name: 'app.tsx' },
          { id: 'src/index.ts', name: 'index.ts' },
        ],
      },
      { id: 'uno.config', name: 'uno.config.ts' },
      { id: 'package.json', name: 'package.json' },
      { id: 'renovate.json', name: 'renovate.json' },
      { id: 'readme.md', name: 'README.md' },
    ],
  },
})

export function InitialValue() {
  return (
    <Tree.Root
      collection={collection}
      defaultSelectedValue={['src']}
      defaultExpandedValue={['node_modules', 'src']}
    >
      <Tree.Label>Tree</Tree.Label>
      <Tree.Tree>
        <For each={collection.rootNode.children}>
          {(node, index) => <TreeNode node={node} indexPath={[index()]} />}
        </For>
      </Tree.Tree>
    </Tree.Root>
  )
}

<script lang="ts">
  import { Tree, createTreeCollection } from '@destyler-ui/svelte'
  import TreeNode from './TreeNode.svelte'

  interface Node {
    id: string
    name: string
    children?: Node[]
  }

  const collection = createTreeCollection<Node>({
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'node_modules',
          name: 'node_modules',
          children: [
            { id: 'node_modules/destyler', name: 'destyler' },
            { id: 'node_modules/unocss', name: 'unocss' },
            {
              id: 'node_modules/@types',
              name: '@types',
              children: [
                { id: 'node_modules/@types/react', name: 'react' },
                { id: 'node_modules/@types/react-dom', name: 'react-dom' },
              ],
            },
          ],
        },
        {
          id: 'src',
          name: 'src',
          children: [
            { id: 'src/app.tsx', name: 'app.tsx' },
            { id: 'src/index.ts', name: 'index.ts' },
          ],
        },
        { id: 'uno.config', name: 'uno.config.ts' },
        { id: 'package.json', name: 'package.json' },
        { id: 'renovate.json', name: 'renovate.json' },
        { id: 'readme.md', name: 'README.md' },
      ],
    },
  })

</script>

<Tree.Root {collection} defaultSelectedValue={["src"]} defaultExpandedValue={["node_modules", "src"]}>
  <Tree.Label>Tree</Tree.Label>
  <Tree.Tree>
    {#each collection.rootNode.children ?? [] as node, index (node.id)}
      <TreeNode {node} indexPath={[index]} />
    {/each}
  </Tree.Tree>
</Tree.Root>

Tree Node

Use a recursive tree node pattern for dynamic data.

Show Code

<script setup lang="ts">
import { Tree } from '@destyler-ui/vue'

interface Node {
  id: string
  name: string
  children?: Node[]
}

interface Props {
  node: Node
  indexPath: number[]
}

defineProps<Props>()
</script>

<template>
  <Tree.NodeProvider :node="node" :indexPath="indexPath">
    <template v-if="node.children">
      <Tree.Branch>
        <Tree.BranchControl>
          <Tree.BranchTrigger>
            <Tree.BranchText>
              {{ node.name }}
            </Tree.BranchText>
            <Tree.BranchIndicator>
              ▶
            </Tree.BranchIndicator>
          </Tree.BranchTrigger>
        </Tree.BranchControl>
        <Tree.BranchContent>
          <Tree.BranchIndentGuide />
          <TreeNode
            v-for="(child, index) in node.children"
            :key="child.id"
            :node="child"
            :indexPath="[...indexPath, index]"
          />
        </Tree.BranchContent>
      </Tree.Branch>
    </template>
    <template v-else>
      <Tree.Item>
        <Tree.ItemIndicator>
          •
        </Tree.ItemIndicator>
        <Tree.ItemText>
          {{ node.name }}
        </Tree.ItemText>
      </Tree.Item>
    </template>
  </Tree.NodeProvider>
</template>

import { Tree } from '@destyler-ui/react'

interface Node {
  id: string
  name: string
  children?: Node[]
}

interface TreeNodeProps {
  node: Node
  indexPath: number[]
}

export function TreeNode({ node, indexPath }: TreeNodeProps) {
  if (node.children) {
    return (
      <Tree.NodeProvider node={node} indexPath={indexPath}>
        <Tree.Branch>
          <Tree.BranchControl>
            <Tree.BranchTrigger>
              <Tree.BranchText>
                {node.name}
              </Tree.BranchText>
              <Tree.BranchIndicator>
                ▶
              </Tree.BranchIndicator>
            </Tree.BranchTrigger>
          </Tree.BranchControl>
          <Tree.BranchContent>
            <Tree.BranchIndentGuide />
            {node.children.map((child, index) => (
              <TreeNode
                key={child.id}
                node={child}
                indexPath={[...indexPath, index]}
              />
            ))}
          </Tree.BranchContent>
        </Tree.Branch>
      </Tree.NodeProvider>
    )
  }

  return (
    <Tree.NodeProvider node={node} indexPath={indexPath}>
      <Tree.Item>
        <Tree.ItemIndicator>
          •
        </Tree.ItemIndicator>
        <Tree.ItemText>
          {node.name}
        </Tree.ItemText>
      </Tree.Item>
    </Tree.NodeProvider>
  )
}

import { Tree } from '@destyler-ui/solid/tree'
import { For, Show } from 'solid-js'

interface Node {
  id: string
  name: string
  children?: Node[]
}

interface TreeNodeProps {
  node: Node
  indexPath: number[]
}

export function TreeNode(props: TreeNodeProps) {
  return (
    <Tree.NodeProvider node={props.node} indexPath={props.indexPath}>
      <Show
        when={props.node.children}
        fallback={(
          <Tree.Item>
            <Tree.ItemIndicator>•</Tree.ItemIndicator>
            <Tree.ItemText>{props.node.name}</Tree.ItemText>
          </Tree.Item>
        )}
      >
        <Tree.Branch>
          <Tree.BranchControl>
            <Tree.BranchTrigger>
              <Tree.BranchText>{props.node.name}</Tree.BranchText>
              <Tree.BranchIndicator>▶</Tree.BranchIndicator>
            </Tree.BranchTrigger>
          </Tree.BranchControl>
          <Tree.BranchContent>
            <Tree.BranchIndentGuide />
            <For each={props.node.children}>
              {(child, index) => (
                <TreeNode node={child} indexPath={[...props.indexPath, index()]} />
              )}
            </For>
          </Tree.BranchContent>
        </Tree.Branch>
      </Show>
    </Tree.NodeProvider>
  )
}

<script lang="ts">
  import { Tree } from '@destyler-ui/svelte'

  interface Node {
    id: string
    name: string
    children?: Node[]
  }

  let { node, indexPath }: { node: Node; indexPath: number[] } = $props()
</script>

{#snippet renderNode(currentNode: Node, currentIndexPath: number[])}
  <Tree.NodeProvider node={currentNode} indexPath={currentIndexPath}>
    {#if currentNode.children}
      <Tree.Branch>
        <Tree.BranchControl>
          <Tree.BranchTrigger>
            <Tree.BranchText>{currentNode.name}</Tree.BranchText>
            <Tree.BranchIndicator>▶</Tree.BranchIndicator>
          </Tree.BranchTrigger>
        </Tree.BranchControl>
        <Tree.BranchContent>
          <Tree.BranchIndentGuide />
          {#each currentNode.children as child, index (child.id)}
            {@render renderNode(child, [...currentIndexPath, index])}
          {/each}
        </Tree.BranchContent>
      </Tree.Branch>
    {:else}
      <Tree.Item>
        <Tree.ItemIndicator>•</Tree.ItemIndicator>
        <Tree.ItemText>{currentNode.name}</Tree.ItemText>
      </Tree.Item>
    {/if}
  </Tree.NodeProvider>
{/snippet}

{@render renderNode(node, indexPath)}

API Reference

Root

Prop	Default	Type
collection*	—	TreeCollection<T> The collection of tree nodes
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
defaultExpandedValue	—	string[] The initial expanded items of the tree view. Use this when you do not need to control the state of the tree view.
defaultSelectedValue	—	string[] The initial selected items of the tree view. Use this when you do not need to control the state of the tree view.
expandedValue	—	string[] The id of the expanded nodes
expandOnClick	true	false | true Whether clicking on a branch should open it or not
focusedValue	—	string The id of the focused node
id	—	string The unique identifier of the machine.
ids	—	Partial<{ root: string; tree: string; label: string; node: (value: string) => string; }> The ids of the tree elements. Useful for composition.
lazyMount	false	false | true Whether to enable lazy mounting
selectedValue	—	string[] The id of the selected nodes
selectionMode	"single"	"single" | "multiple" Whether the tree supports multiple selection - "single": only one node can be selected - "multiple": multiple nodes can be selected
typeahead	true	false | true Whether the tree supports typeahead search
unmountOnExit	false	false | true Whether to unmount on exit.

Emit	Event
expandedChange	[details: ExpandedChangeDetails] Called when the tree is opened or closed
focusChange	[details: FocusChangeDetails] Called when the focused node changes
selectionChange	[details: SelectionChangeDetails] Called when the selection changes
update:expandedValue	[value: string[]]
update:focusedValue	[value: string | null]
update:selectedValue	[value: string[]]

Branch

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

BranchContent

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

BranchControl

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

BranchIndentGuide

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

BranchIndicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

BranchText

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

BranchTrigger

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

Item

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemIndicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

NodeContext

No serializable props or emits are declared for this part.

NodeProvider

Prop	Default	Type
indexPath*	—	number[] The index path of the tree node
node*	—	T The tree node

RootProvider

Prop	Default	Type
value*	—	MachineApi<PropTypes, T>
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
lazyMount	false	false | true Whether to enable lazy mounting
unmountOnExit	false	false | true Whether to unmount on exit.

Tree

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
collection*	—	TreeCollection<T> The collection of tree nodes
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
defaultExpandedValue	—	string[] The initial expanded items of the tree. Use this when you do not need to control the state of the tree.
defaultSelectedValue	—	string[] The initial selected items of the tree. Use this when you do not need to control the state of the tree.
expandedValue	—	string[] The controlled ids of the expanded nodes
expandOnClick	true	false | true Whether clicking on a branch should open it or not
focusedValue	—	null | string The id of the focused node
ids	—	Partial<{ root: string; tree: string; label: string; node: (value: string) => string; }> The ids of the tree elements. Useful for composition.
lazyMount	false	false | true Whether to enable lazy mounting
onExpandedChange	—	(details: ExpandedChangeDetails) => void Called when the tree is opened or closed
onFocusChange	—	(details: FocusChangeDetails) => void Called when the focused node changes
onSelectionChange	—	(details: SelectionChangeDetails) => void Called when the selection changes
selectedValue	—	string[] The controlled ids of the selected nodes
selectionMode	"single"	"multiple" | "single" Whether the tree supports multiple selection - "single": only one node can be selected - "multiple": multiple nodes can be selected
typeahead	true	false | true Whether the tree supports typeahead search
unmountOnExit	false	false | true Whether to unmount on exit.

Branch

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

BranchContent

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

BranchControl

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

BranchIndentGuide

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

BranchIndicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

BranchText

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

BranchTrigger

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
children*	—	(context: UseTreeContext<T>) => ReactNode

Item

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemIndicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

NodeContext

Prop	Default	Type
children*	—	(context: UseTreeNodeContext) => ReactNode

NodeProvider

Prop	Default	Type
indexPath*	—	number[] The index path of the tree node
node*	—	T The tree node
children	—	null | string | number | bigint | false | true | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined>

RootProvider

Prop	Default	Type
value*	—	UseTreeReturn<T>
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
lazyMount	false	false | true Whether to enable lazy mounting
unmountOnExit	false	false | true Whether to unmount on exit.

Tree

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
collection*	—	TreeCollection<T> The collection of tree nodes
asChild	—	(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
defaultExpandedValue	—	string[] The initial expanded items of the tree view. Use this when you do not need to control the state of the tree view.
defaultSelectedValue	—	string[] The initial selected items of the tree view. Use this when you do not need to control the state of the tree view.
expandedValue	—	string[] The controlled ids of the expanded nodes
expandOnClick	true	false | true Whether clicking on a branch should open it or not
focusedValue	—	null | string The id of the focused node
id	—	string The unique identifier of the machine.
ids	—	Partial<{ root: string; tree: string; label: string; node: (value: string) => string; }> The ids of the tree elements. Useful for composition.
lazyMount	false	false | true Whether to enable lazy mounting
onExpandedChange	—	(details: ExpandedChangeDetails) => void Called when the tree is opened or closed
onFocusChange	—	(details: FocusChangeDetails) => void Called when the focused node changes
onSelectionChange	—	(details: SelectionChangeDetails) => void Called when the selection changes
selectedValue	—	string[] The controlled ids of the selected nodes
selectionMode	"single"	"single" | "multiple" Whether the tree supports multiple selection - "single": only one node can be selected - "multiple": multiple nodes can be selected
typeahead	true	false | true Whether the tree supports typeahead search
unmountOnExit	false	false | true Whether to unmount on exit.

Branch

Prop	Default	Type
asChild	—	(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

BranchContent

Prop	Default	Type
asChild	—	(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

BranchControl

Prop	Default	Type
asChild	—	(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

BranchIndentGuide

Prop	Default	Type
asChild	—	(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

BranchIndicator

Prop	Default	Type
asChild	—	(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

BranchText

Prop	Default	Type
asChild	—	(props: (userProps?: JSX.HTMLAttributes<HTMLSpanElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

BranchTrigger

Prop	Default	Type
asChild	—	(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
children*	—	(context: UseTreeContext<T>) => Element

Item

Prop	Default	Type
asChild	—	(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

ItemIndicator

Prop	Default	Type
asChild	—	(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
asChild	—	(props: (userProps?: JSX.HTMLAttributes<HTMLSpanElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
asChild	—	(props: (userProps?: JSX.LabelHTMLAttributes<HTMLLabelElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

NodeContext

Prop	Default	Type
children*	—	(context: UseTreeNodeContext) => Element

NodeProvider

Prop	Default	Type
indexPath*	—	number[] The index path of the tree node
node*	—	T The tree node
children	—	null | number | false | true | Node | JSX.ArrayElement | (string & {})

RootProvider

Prop	Default	Type
value*	—	UseTreeReturn<T>
asChild	—	(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
lazyMount	false	false | true Whether to enable lazy mounting
unmountOnExit	false	false | true Whether to unmount on exit.

Tree

Prop	Default	Type
asChild	—	(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
collection*	—	TreeCollection<T>
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
defaultExpandedValue	—	string[] The initial expanded node ids when not controlled. Prefer this over seeding with `expandedValue` for uncontrolled usage.
defaultSelectedValue	—	string[] The initial selected node ids when not controlled. Prefer this over seeding with `selectedValue` for uncontrolled usage.
expandedValue	—	string[] The controlled ids of the expanded nodes
expandOnClick	true	false | true Whether clicking on a branch should open it or not
focusedValue	—	null | string The id of the focused node
id	—	string A stable id for the tree. Svelte hooks cannot call `$props.id()`. Components should pass the id generated at the component's top level; `Tree.Root` does this automatically.
ids	—	Partial<{ root: string; tree: string; label: string; node: (value: string) => string; }> The ids of the tree elements. Useful for composition.
lazyMount	false	false | true Whether to enable lazy mounting
onExpandedChange	—	(details: import("@destyler/tree").ExpandedChangeDetails) => void Called when the tree is opened or closed
onFocusChange	—	(details: import("@destyler/tree").FocusChangeDetails) => void Called when the focused node changes
onSelectionChange	—	(details: import("@destyler/tree").SelectionChangeDetails) => void Called when the selection changes
selectedValue	—	string[] The controlled ids of the selected nodes
selectionMode	"single"	"multiple" | "single" Whether the tree supports multiple selection - "single": only one node can be selected - "multiple": multiple nodes can be selected
typeahead	true	false | true Whether the tree supports typeahead search
unmountOnExit	false	false | true Whether to unmount on exit.

Branch

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"li">]>
children	—	Snippet<[]> | undefined

BranchContent

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"ul">]>
children	—	Snippet<[]> | undefined

BranchControl

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

BranchIndentGuide

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

BranchIndicator

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

BranchText

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"span">]>
children	—	Snippet<[]> | undefined

BranchTrigger

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Context

Prop	Default	Type
render*	—	Snippet<[UseTreeContext<any>]>

Item

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"li">]>
children	—	Snippet<[]> | undefined

ItemIndicator

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

ItemText

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"span">]>
children	—	Snippet<[]> | undefined

Label

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"h3">]>
children	—	Snippet<[]> | undefined

NodeContext

Prop	Default	Type
render*	—	Snippet<[UseTreeNodeContext]>

NodeProvider

Prop	Default	Type
indexPath*	—	number[]
node*	—	T
children	—	Snippet<[]> | undefined

RootProvider

Prop	Default	Type
value*	—	UseTreeReturn<T>
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
lazyMount	false	false | true Whether to enable lazy mounting
unmountOnExit	false	false | true Whether to unmount on exit.

Tree

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"ul">]>
children	—	Snippet<[]> | undefined