Tree

Basic

Root1
Root2 
<script>
  const tree = [{
    title: 'Root1',
    children: [{
      title: 'Root1 - Sub1'
    }, {
      title: 'Root1 - Sub2'
    }]
  }, {
    title: 'Root2',
    children: [{
      title: 'Root2 - Sub1',
      children: [{
        title: 'Root2 - Sub1 - Sub1',
        children: [
          { title: 'Root2 - Sub1 - Sub1 - Sub1' },
          { title: 'Root2 - Sub1 - Sub1 - Sub2' },
        ]
      }, {
        title: 'Root2 - Sub1 - Sub2',
      }]
    }, {
      title: 'Root2 - Sub2'
    }]
  }]
</script>

<CTree tree="{tree}" />
<script>
  const tree = [{
    title: 'Root1',
    children: [{
      title: 'Root1 - Sub1'
    }, {
      title: 'Root1 - Sub2'
    }]
  }, {
    title: 'Root2',
    children: [{
      title: 'Root2 - Sub1',
      children: [{
        title: 'Root2 - Sub1 - Sub1',
        children: [
          { title: 'Root2 - Sub1 - Sub1 - Sub1' },
          { title: 'Root2 - Sub1 - Sub1 - Sub2' },
        ]
      }, {
        title: 'Root2 - Sub1 - Sub2',
      }]
    }, {
      title: 'Root2 - Sub2'
    }]
  }]
</script>

<CTree tree="{tree}" />
svelte
Click fold/expand code

Connectors

Root1
Root2 
<script>
  const tree = [{
    title: 'Root1',
    children: [{
      title: 'Root1 - Sub1'
    }, {
      title: 'Root1 - Sub2'
    }]
  }, {
    title: 'Root2',
    children: [{
      title: 'Root2 - Sub1',
      children: [{
        title: 'Root2 - Sub1 - Sub1',
        children: [
          { title: 'Root2 - Sub1 - Sub1 - Sub1' },
          { title: 'Root2 - Sub1 - Sub1 - Sub2' },
        ]
      }, {
        title: 'Root2 - Sub1 - Sub2',
      }]
    }, {
      title: 'Root2 - Sub2'
    }]
  }]
</script>

<CTree connectors={true} tree="{tree}" />
<script>
  const tree = [{
    title: 'Root1',
    children: [{
      title: 'Root1 - Sub1'
    }, {
      title: 'Root1 - Sub2'
    }]
  }, {
    title: 'Root2',
    children: [{
      title: 'Root2 - Sub1',
      children: [{
        title: 'Root2 - Sub1 - Sub1',
        children: [
          { title: 'Root2 - Sub1 - Sub1 - Sub1' },
          { title: 'Root2 - Sub1 - Sub1 - Sub2' },
        ]
      }, {
        title: 'Root2 - Sub1 - Sub2',
      }]
    }, {
      title: 'Root2 - Sub2'
    }]
  }]
</script>

<CTree connectors={true} tree="{tree}" />
svelte
Click fold/expand code

Tree type

export interface Node {
  title: string
  children?: Node[]
}

export type Tree = Node[]

export interface Node {
  title: string
  children?: Node[]
}

export type Tree = Node[]
ts

CTree Props

  • tree
    Array<import('./types').Tree>
    default: undefined

    The tree array

  • connectors
    boolean
    default: false

    Whether to show connectors or not

CTree Events

No data

CTree Slots

  • icon

    Customize the expand status indicator icon

CTree Exports

No data
Suggest changes to this page
Last update at: 2023/08/13 13:04:55