侧边栏自定义
提供了默认的设计器左侧边栏的布局设置。
侧边栏组件
Sidebar
侧边栏容器组件。
Sidebar.Item
侧边栏子项
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
key | 子项的唯一标识 | string | - |
label | 子项的描述文本,推荐不超过2个字 | string | - |
icon | 图标 | ReactNode | - |
showBadge | 是否显示角标 | boolean | { count?: number; dot?: boolean; } | - |
title | 展开面板的标题 | string | - |
width | 展开面板的宽度 | number | - |
isFloat | 展开面板是否为浮动面板,浮动面板不压缩工作区宽度 | boolean | - |
widgetProps | 子项的属性 | object | - |
children | 子项的展开面板内容 | ReactNode | - |
内置的工具栏组件
设计器内置了一些基本的侧边栏组件,当子项的 key
使用了特定的值时,会自动的进行渲染。
key | 组件 |
---|---|
components | 组件列表 |
outline | 结构 |
dependency | 依赖管理 |
variables | 变量管理 |
dataSource | 数据源管理 |
例如,下面的代码会自动渲染一个结构面板:
<Sidebar.Item key="outline" label="结构" icon={<BuildOutlined />} />
自定义侧边栏子项
可以直接在 Sidebar.Item
的子节点传入自定义的内容来渲染需要的结果,例如:
<Sidebar.Item key="custom" label="自定义" icon={<SmileOutlined />}>
<div>展开的内容部分</div>
</Sidebar.Item>