WebBuilder 容器与导航：Card、Panel、Tab、Toolbar、Menu 的排列组合

一、控件是砖，容器是房

geejing WebBuilder 快速开发平台的容器示例页（示例 → comps → container）是全库最长的一页，Card 出现了 24 次、Panel 12 次、Tab 6 次，我们挑重点讲。

二、Card 与 Panel：一软一硬两张卡

Wb.Card 卡片是现代界面的基本单元：圆角、留白、可带标题，内容随意堆。示例里几十张卡片演示了不同内边距、不同圆角、不同背景的组合，卡片里装表单、装文字、装图表都行。第八篇讲布局时你已经见过它——row/flex 布局里最常被摆的就是一张张 Card。

Wb.Panel 面板比卡片更"结构化"：自带 tbar（顶部工具栏）、bbar（底部工具栏）、标题区、内容区、甚至内嵌菜单。看示例：Panel 顶部一条 Toolbar 放操作按钮，底部一条 bbar 用 justify: end 把按钮推到右下角——典型的"列表 + 操作"页面骨架。工具栏里还能塞 Wb.Menu 菜单，点按钮弹出菜单项。

三、Tab 与手风琴：空间不够时的两种答案

页面内容多、屏幕不够用，两种经典方案：

1. Wb.Tab 标签页：横排页签切换内容区，示例里 6 个 Tab 演示了普通标签、带图标、可关闭、动态增删等形态；
2. 手风琴面板（Accordion style panels）：多个折叠面板纵向排列，展开一个收起其他，设置页、分类导航的常客。

示例页里还有 Tree style panels（树形折叠面板）和 Plain title panel blocks（纯标题块）两种变体，加上 Wb.Fieldset 字段集——表单分区专用的带标题框，把"基本信息 / 高级设置"分开摆。

四、Toolbar 与 Menu：60 个 Item 撑起的导航课

单独开一页示例（示例 → comps → toolbar-menu）讲工具栏和菜单，因为 Item 菜单项出现了 60 次：

这一页基本是一部"工具栏排版教科书"：

• Item：万能菜单项，可带图标、可带勾选态、可带子菜单；
• Divider 分隔线 / Space 空隙 / Fill 撑满：三兄弟负责分组和留白——Fill 一放，右边的按钮自动靠右；
• 工具栏里不仅能放按钮：示例把 Label、Slider、下拉 Trigger 都塞进了工具栏，证明它是个真正的容器；
• Menu 的形态：按钮下拉菜单、右键菜单、工具栏内嵌菜单、多级级联，一套 Wb.Menu 通吃。

记住一个经验法则：页面的主操作放 Toolbar，次操作放 Menu。全摊出来是新手常见的"按钮海"，收进菜单是老手的克制。

五、动态加标签页：模板 + add 的组合拳

基础示例里有个小而精的演示（示例 → basic → add-tab-card）：点一下工具栏的 Add New Card，就多出一个新标签页，里面装着模板内容：

核心代码只有几行：

let newCard = app.cardTpl;        // 卡片模板，instanced: false 不预实例化
newCard.cid = Wb.getId();         // 生成唯一 ID，避免冲突
app.cardIndex ??= 0;
app.cardIndex++;
newCard.title = 'Card ' + app.cardIndex;
newCard = app.tab1.add(app.cardTpl);   // 添加进标签页容器
newCard.down('text1').value = 'text ' + app.cardIndex;
newCard.show();                   // 显示新页

三个要点：模板卡片设 instanced: false，声明时只是定义、不渲染；Wb.getId() 保证动态控件 ID 唯一；down('text1') 沿容器树向下找子控件，拿到就能直接改值。这套"模板 + add + down"的组合拳，是做"多文档界面、动态报表页、可配置工作台"的基本功。