Components
Json Tree View
JsonTreeView, dressed in the paper-and-ink system: the tree-view recipes re-scoped, with value nodes reading as tabular data. The parts — Root, Tree, plus createJsonTreeCollection.
#Basic usage
{ title: "Paper & Ink", accent: "qinghua", density: "default", … }
title:"Paper & Ink"
accent:"qinghua"
density:"default"
contrast:4.8
tags:(3) [ "paper", "ink", "light" ]
0:"paper"
1:"ink"
2:"light"
length:3
<script setup lang="ts">
import { chevron_right } from "@bysages/icons";
import { Icon, JsonTreeView } from "@bysages/vue";
const data = {
title: "Paper & Ink",
accent: "qinghua",
density: "default",
contrast: 4.8,
tags: ["paper", "ink", "light"],
};
</script>
<template>
<JsonTreeView.Root :data="data" :default-expanded-depth="1">
<JsonTreeView.Tree>
<template #arrow>
<Icon :glyph="chevron_right" />
</template>
</JsonTreeView.Tree>
</JsonTreeView.Root>
</template>
#Props
#KeyNode
| Prop | Type | Default | Description |
|---|---|---|---|
node | JsonNode | The node to render. | |
showQuotes | boolean | Whether to show quotes on the key. |
#Node
| Prop | Type | Default | Description |
|---|---|---|---|
indentGuide | boolean | — | |
indexPath | number[] | — | |
node | JsonNode | — |
#Root
| Prop | Type | Default | Description |
|---|---|---|---|
data | object | The data to display in the tree. | |
defaultExpandedDepth | number | The default expand level. | |
quotesOnKeys | boolean | Whether to show quotes on the keys. |
#Tree
A styled part — no props of its own; it takes the anatomy's shared styling.
#ValueNode
| Prop | Type | Default | Description |
|---|---|---|---|
node | JsonNodeHastElement | — |