定价

SidebarSection

将 Sidebar 导航组织为带标题的分组,支持展开、收起与附加操作,便于浏览较长的导航列表。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中;本页展示网站用法,支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费,不属于项目,不占项目或开发者席位额度,无需 SnowUI 注册、激活或付费证明。

如何使用

用于 Sidebar 中带标题的导航分组。分组已有分隔能力时不重复添加 Separator;子项使用 SidebarItem。

  • id 标识分组,title 提供组名,children 放置导航项。

  • collapsible / collapsed 控制分组收起,defaultCollapsed 为初始状态;actions 提供组级操作。

  • 内置展开/收起可访问名称随 LocaleProvider 更新;title 与 action.label 属于调用方内容,保持原样。

导入

import { SidebarSection } from '@snowui-design-system/components';

用法

受控状态

默认收起

始终展开

操作

API 参考

属性 类型 默认值 示例 描述
id string 必填 id="example" 稳定分类标识
title string — title="Example" 内置分类标题;未传时不渲染标题行
collapsible boolean — collapsible 是否提供内置展开/收起按钮 默认行为:有标题时 true。
collapsed boolean — collapsed 传入布尔值时控制分类折叠状态;省略时由分类内部状态及 Sidebar 持久化状态管理
defaultCollapsed boolean false defaultCollapsed 非受控初始状态
onCollapsedChange (collapsed: boolean) => void — onCollapsedChange={(value) => { /* handle value */ }} 分类折叠变化回调
actions SidebarActionData[] | Snippet [] actions={actionsContent} 0~多个标题操作;数组生成 Button bare
children Snippet — <SidebarSection>Content</SidebarSection> 分类内容
parts ComponentPartsOf<{ Button: typeof Button; Separator: typeof Separator; }> — parts={partsOptions} 配置数据生成的 Button 与内置 Separator