JsonTreeView experimental

Ark UI JsonTreeView 기반 wrapper입니다. data prop으로 받은 임의의 JSON 값을 펼침 가능한 트리로 렌더링하며, 내부적으로 Tree View primitive 위에 동작합니다. Root, RootProvider, Tree anatomy를 제공합니다.

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

{ component: "json-tree-view", primitive: "@ark-ui/svelte/json-tree-view", parts: Array(3), … }

component : "json-tree-view"

primitive : "@ark-ui/svelte/json-tree-view"

parts : (3) [ "Root", "RootProvider", "Tree" ]

options : { quotesOnKeys: false, defaultExpandedDepth: 1 }

accessible : true

deprecated : null

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

  // 디자인 시스템의 한 컴포넌트 메타데이터를 JSON 으로 보여준다.
  const data = {
    component: 'json-tree-view',
    primitive: '@ark-ui/svelte/json-tree-view',
    parts: ['Root', 'RootProvider', 'Tree'],
    options: {
      quotesOnKeys: false,
      defaultExpandedDepth: 1,
    },
    accessible: true,
    deprecated: null,
  }
</script>

<JsonTreeView.Root {data} defaultExpandedDepth={1} style="max-width: 24rem;">
  <JsonTreeView.Tree>
    {#snippet arrow()}
      <span aria-hidden="true">▸</span>
    {/snippet}
  </JsonTreeView.Tree>
</JsonTreeView.Root>

Import

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

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

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