1. 首页
  2. 卡片 Card
  3. card-mode 模块卡

卡片 · card-mode 模块卡

卡片家族 索引 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-mode：左侧列式模块切换器——head 纵向排 .mode-menu 切换项（主色描边，第一项补顶边），body 为对应模块内容面板；追加 mode-gateway 换网关风格底色。
本页内容 默认多模块 mode-gateway 网关

默认多模块

基础设置
高级设置
模块内容面板：随切换展示对应模块（由 JS 控制）。
<div class="card card-mode"> <div class="card-head"> <div class="mode-menu"><span>基础设置</span></div> <div class="mode-menu"><span>高级设置</span></div> </div> <div class="card-body">模块内容</div> </div>
mode-menuhead 内纵向切换项：1px 主色边框（首项补 top 边框）
.card-headoverflow:auto（纵向滚动）；card-mode 反转为列
.card-bodyflex:auto + width:100%，模块内容滚动区

mode-gateway 网关

基础设置
高级设置
内容面板。
<div class="card card-mode mode-gateway"> <div class="card-head"> <div class="mode-menu"><span>基础设置</span></div> </div> <div class="card-body">内容</div> </div>
上一张（循环） card-menubar 菜单条
下一张 card-menus 侧栏导航
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI · 返回首页