Tree View experimental

Ark UI Tree View 기반 wrapper입니다. createTreeCollection으로 만든 트리 데이터를 받아 폴더/파일 형태의 계층 구조를 렌더링합니다. Branch(펼침 가능)와 Item(말단 leaf) anatomy를 제공하며, 키보드 탐색·선택·확장 동작은 Ark/zag primitive가 담당하고 wrapper는 odbd anatomy 클래스만 입힙니다.

@ark-ui/svelte/tree-view Ark UI docs ↗

프로젝트 구조

packages

docs

README.md

<script lang="ts">
  import * as TreeView from '@odbd/svelte/tree-view'

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

  const collection = TreeView.createTreeCollection<Node>({
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'packages',
          name: 'packages',
          children: [
            { id: 'packages/tokens', name: 'tokens' },
            { id: 'packages/theme', name: 'theme' },
            { id: 'packages/svelte', name: 'svelte' },
          ],
        },
        {
          id: 'docs',
          name: 'docs',
          children: [
            { id: 'docs/index.md', name: 'index.md' },
            { id: 'docs/tree-view.md', name: 'tree-view.md' },
          ],
        },
        { id: 'README.md', name: 'README.md' },
      ],
    },
  })
</script>

{#snippet treeNode(node: Node, indexPath: number[])}
  <TreeView.NodeProvider {node} {indexPath}>
    {#if node.children}
      <TreeView.Branch>
        <TreeView.BranchControl>
          <TreeView.BranchIndicator>▸</TreeView.BranchIndicator>
          <TreeView.NodeCheckbox aria-label="노드 선택">
            <TreeView.NodeCheckboxIndicator>
              {#snippet children()}✓{/snippet}
              {#snippet indeterminate()}–{/snippet}
            </TreeView.NodeCheckboxIndicator>
          </TreeView.NodeCheckbox>
          <TreeView.BranchText>{node.name}</TreeView.BranchText>
        </TreeView.BranchControl>
        <TreeView.BranchContent>
          <TreeView.BranchIndentGuide />
          {#each node.children as child, index}
            {@render treeNode(child, [...indexPath, index])}
          {/each}
        </TreeView.BranchContent>
      </TreeView.Branch>
    {:else}
      <TreeView.Item>
        <TreeView.NodeCheckbox aria-label="노드 선택">
          <TreeView.NodeCheckboxIndicator>
            {#snippet children()}✓{/snippet}
          </TreeView.NodeCheckboxIndicator>
        </TreeView.NodeCheckbox>
        <TreeView.ItemText>{node.name}</TreeView.ItemText>
      </TreeView.Item>
    {/if}
  </TreeView.NodeProvider>
{/snippet}

<TreeView.Root {collection} selectionMode="multiple" aria-label="프로젝트 파일">
  <TreeView.Label>프로젝트 구조</TreeView.Label>
  <TreeView.Tree>
    {#each collection.rootNode.children ?? [] as node, index}
      {@render treeNode(node, [index])}
    {/each}
  </TreeView.Tree>
</TreeView.Root>

Import

Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.

import * as TreeView from '@odbd/svelte/tree-view'

import { TreeView } from '@odbd/react/tree-view'