1. 首页
  2. 卡片 Card
  3. card-tabmenu 标签菜单

卡片 · card-tabmenu 标签菜单

卡片家族 索引 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-tabmenu：后台 Tab 页框——grid 双行（head 标签栏 + body 页面区）；head 含左侧定位条 .tabmenu-lctl、可横向滚动标签 .tabmenu-tab（激活项底部主色下划线、带关闭 i）、右侧控制 .tabmenu-ctl（刷新/盒子/全屏）。
本页内容 结构示例 分块参数

结构示例

  • 卡片总览
  • 数据看板
  • 系统监控
页面内容区：随标签切换加载对应 iframe / 视图。
<div class="card card-tabmenu"> <div class="card-head"> <i class="tabmenu-lctl"></i> <ul class="tabmenu-tab"> <li class="active"><span>卡片总览</span><span class="close">×</span></li> </ul> <div class="tabmenu-ctl"> <div class="tabmenu-control-refresh"><i class="icon icon-refresh"></i></div> <div class="tabmenu-control-box"><i class="icon icon-menu"></i></div> <div class="tabmenu-control-fullscreen"><i class="icon icon-mediafullscreen"></i></div> </div> </div> <div class="card-body">内容</div> </div>

分块参数

tabmenu-lctl左定位条：3px 主色竖条 + 圆角 2px
tabmenu-tab li标签项：min-width 80px、圆角边框、激活转 inset 0 -2px 主色下划线
tabmenu-tab li i关闭钮：默认隐藏，激活项显示；hover 转红
tabmenu-ctl右侧控制组：flex + 0.5rem 间隙，hover 主色
提示： 标签与页面的联动由业务 JS 管理；控制钮图标用 kuoqi 字体类 .icon-refresh / .icon-menu / .icon-mediafullscreen，与引擎生成结构一致。
上一张（循环） card-menus 侧栏导航
下一张 card-code 代码块
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI · 返回首页