1. 首页
  2. 卡片 Card
  3. card-tree 树卡

卡片 · card-tree 树卡

卡片家族 索引 base cpanel crumb full page border radius api artic namecode imgs tips total default box checkbox form form-item form-inpselect table pager multipled menubar mode menus tabmenu code json template tab slide paginate tree toggle marquee timeaxis waterfall popup nav chatbox drag choose progress roll
树卡 card-tree：节点卡自带展开图标（tree-icon 的 kuoqi 字形：展开 󶕰 / 收起 󶕩 / 末级不显示）；子节点嵌在父卡 card-foot > .card.card-tree 中，1rem 左缩进形成层级；tree-isclosed 把子层收起为 0 高。勾选 / 展开联动由引擎接管。
本页内容 示例 状态类

示例

数据中心
数据库
MySQL 实例
配置中心（收起）
环境变量
<div class="card card-tree"> <div class="card-head"> <span class="tree-icon"></span> <span class="tree-headbox">父节点</span> </div> <div class="card-foot"> <div class="card card-tree tree-islast"> <div class="card-head">...</div> </div> </div> </div>

状态类

tree-isclosed收起：图标转 󶕩，子层 height:0 隐藏
tree-islast末级：图标置空（可不显示），可选 display:inline-block
tree-isopen展开默认态（图标 󶕰）
data-id / data-choose-name引擎层级选择：勾选联动父/子、name 聚合
注意： card-tree 属于引擎卡，演示仅写死展开态；运行动态展开 / 勾选请交由引擎与 data- 参数。
上一张（循环） card-paginate 分页加载
下一张 card-toggle 折叠
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI · 返回首页