{"slug":"tree","mode":"single","examples":[{"id":"tree-ex-1","title":"基础用法","titleSrc":"","desc":"","html":"<div class=\"demo\">\n  <h1>Kole UI · Tree 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 Tree 规范：节点高32px、缩进16px/级、箭头12px、选中态 #F0F5FF + 品牌色、支持复选框级联</p>\n  <label style=\"font-size:13px;color:var(--color-text-secondary);margin-right:16px;\">\n    <input id=\"chkToggle\" type=\"checkbox\" checked onchange=\"checkable=this.checked; render();\" />\n    启用复选框\n  </label>\n  <div class=\"kole-tree\" id=\"tree\" role=\"tree\" style=\"margin-top:12px\"></div>\n</div>","preview":{"show":[[0]],"hide":[],"mode":"single"},"previewSafe":true,"previewUnsafeReasons":[],"source":"api-derived","code":{"html":"<h1>Kole UI · Tree 组件（纯 H5）</h1>\n<p>对齐 Tree 规范：节点高32px、缩进16px/级、箭头12px、选中态 #F0F5FF + 品牌色、支持复选框级联</p>\n<label style=\"font-size:13px;color:var(--color-text-secondary);margin-right:16px;\">\n  <input id=\"chkToggle\" type=\"checkbox\" checked onchange=\"checkable=this.checked; render();\" />\n  启用复选框\n</label>\n<div class=\"kole-tree\" role=\"tree\" style=\"margin-top:12px\"></div>","jsx":"import { KoleTree } from 'kole-ui/react';\n\n<KoleTree />","vue3":"<template>\n  <KoleTree />\n</template>\n\n<script setup>\nimport { KoleTree } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleTree />\n</template>\n\n<script>\nimport { KoleTree } from 'kole-ui/vue2';\nexport default { components: { KoleTree } };\n</script>"},"notes":["演示页标记只含页面结构，未含可映射的组件属性","演示页未含可映射的调用标记，本片段依据组件 API 表推导"]}]}