22 lines
2.0 KiB
JSON
22 lines
2.0 KiB
JSON
{
|
||
"slug": "tree",
|
||
"curated": true,
|
||
"title": "详情卡片里的内容",
|
||
"desc": "Tree作为详情卡片的内容区，与字段、标签并列时的样子。",
|
||
"uses": [
|
||
"card",
|
||
"tag"
|
||
],
|
||
"markup": {
|
||
"html": "<div class=\"ksc-card\">\n <h3 class=\"ksc-title\">详情</h3>\n <p class=\"ksc-sub\">Kole UI · Tree 组件（纯 H5）</p>\n <div class=\"kole-tree\">Kole UI · Tree 组件（纯 H5）</div>\n <div class=\"ksc-row\">\n <span class=\"kole-tag\">已完成</span>\n </div>\n</div>",
|
||
"jsx": "<div className=\"ksc-card\">\n <h3 className=\"ksc-title\">详情</h3>\n <p className=\"ksc-sub\">Kole UI · Tree 组件（纯 H5）</p>\n <div className=\"kole-tree\">Kole UI · Tree 组件（纯 H5）</div>\n <div className=\"ksc-row\">\n <span className=\"kole-tag\">已完成</span>\n </div>\n</div>",
|
||
"vue2": "<template>\n <div>\n <div class=\"ksc-card\">\n <h3 class=\"ksc-title\">详情</h3>\n <p class=\"ksc-sub\">Kole UI · Tree 组件（纯 H5）</p>\n <div class=\"kole-tree\">Kole UI · Tree 组件（纯 H5）</div>\n <div class=\"ksc-row\">\n <span class=\"kole-tag\">已完成</span>\n </div>\n </div>\n </div>\n</template>",
|
||
"vue3": "<template>\n <div>\n <div class=\"ksc-card\">\n <h3 class=\"ksc-title\">详情</h3>\n <p class=\"ksc-sub\">Kole UI · Tree 组件（纯 H5）</p>\n <div class=\"kole-tree\">Kole UI · Tree 组件（纯 H5）</div>\n <div class=\"ksc-row\">\n <span class=\"kole-tag\">已完成</span>\n </div>\n </div>\n </div>\n</template>\n\n<script setup>\n// 场景外壳由业务页面提供；组件按本端文档的调用方式接入\n</script>"
|
||
},
|
||
"notes": [
|
||
"组件本体类名依据该组件 SSR 产物（site/end-preview/tree.react.html）的根元素：kole-tree",
|
||
"协作者 card, tag 取自组件族耦合关系（.design_library/kole-ui/components/index.json 的 family 字段）",
|
||
"外壳类 ksc-* 与动作按钮 .btn 依据 tools/build-scenes.mjs 的 SCAFFOLD_CSS 与 frameworks/Button.css"
|
||
]
|
||
}
|