Keel GitHub

Sidebar

在线示例:这是真实的 Keel 程序编译成 WebAssembly,可以直接操作。首次加载约 10 MB。全屏打开

应用的导航侧栏:分组、选中项、角标,可以收起成只显示图标。

nav := kit.Sidebar().
    Section("工作台", kit.SidebarItem{ID: "inbox", Label: "收件箱", Icon: kit.IconInbox, Badge: 12}).
    Section("", kit.SidebarItem{ID: "settings", Label: "设置", Icon: kit.IconSettings}).
    OnChange(navigate)
  • 鼠标点击只显示选中背景;Tab、方向键导航显示焦点框。滚动条占用右侧独立留白,不覆盖行背景、角标或点击区域。
  • 36dp 导航行、16dp 图标、14sp 文案;选中项使用中性底色和强调图标,计数为低对比数字,底部展开状态显示折叠文案。
  • 有标题的分组显示标题;没有标题的分组之间用分隔线隔开。
  • 每个可用项都能用 Tab 聚焦,↑ ↓ / Home / End / PageUp / PageDown 移动并滚动到目标,回车或空格激活。Disabled 或 SetItemDisabled(id, bool) 禁用单项;SetDisabled 禁用整个侧栏及插槽操作。
  • SidebarItem.Children 定义嵌套导航。分支整行点击展开/收起,不触发导航回调;→ 展开,← 收起或移到父项。SetExpanded / Expanded 管理展开状态,SetValue 会展开目标祖先并滚动到选中项。
  • Header(el.View) / Footer(el.View) 位于导航滚动区之外,适合工作区切换和账户信息。插槽可在 Render 中读取 Collapsed(),自行切换图标版内容。
  • Height(dp) 显式设置侧栏高度,导航内容溢出时只滚动中间区域;默认按内容定高,上限为窗口高度。嵌入应用外壳时可传 cx.ViewportSize() 返回的高度。
  • 底部按钮可以收起侧栏,收起后宽 56dp:只显示图标,名称改由 Tooltip 显示,角标变成圆点。
  • Icon 可以不设(IconNone):展开时只显示文字,收起时显示名称首字。
  • Filter(query) 只显示名称包含 query 的项(不区分大小写),以及通向它们的父项,父项会临时展开;没有匹配项的分组连同标题一起隐藏。传空字符串恢复全部。选中项被过滤掉时仍保持选中。组件库应用 go run ./examples/components 用它做搜索。
  • Value() / SetValue(id)、SetBadge(id, n)、Collapsed() / SetCollapsed、Width(dp)(默认 220)。

选项会递归复制。整个 Sidebar 的 ID 必须非空且唯一;新增 Section 包含空值或重复 ID 时整组不加入。父项禁用不隐式禁用子项。

Agent:容器角色 navigation;叶项是 link,分支是带展开布尔值的 button,selected 表示当前页;收起按钮名为"收起侧栏""展开侧栏"。

验证:go run ./examples/components -section sidebar,加 -theme dark 检查深色。