跳到主要内容

侧边栏自定义

提供了默认的设计器左侧边栏的布局设置。

侧边栏组件

侧边栏容器组件。

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>