侧边栏 layout-sidebar

主区 + 可折叠侧栏 + 分隔条。

• 类型串：layout-sidebar　默认尺寸：[640, 400]　分类：布局

实时预览

下面渲染的是真实组件（与编辑器 / 运行时同源）。修改右侧「样式参数」，左侧预览实时更新；点击底部「全页面查看」可放大。

属性

下表为本组件特有的属性；position / size / opacity / background / border / 联动选中 / 筛选等通用参数见组件手册总览。

basic

属性	名称	类型	默认	说明
dock-side	停靠边	select(radioGroup)	left	可选：left / right / top / bottom
side-size	侧板尺寸	string	300px
overlay	悬浮覆盖	boolean	false
resizable	运行态可调	boolean	false
default-state	默认状态	select(radioGroup)	expanded	可选：expanded / collapsed

toggle

属性	名称	类型	默认	说明
toggle-visible	显示按钮	boolean	true
toggle-template	按钮样式	select(radioGroup)	default	可选：default / rect
toggle-icon-style	图标样式	select(radioGroup)	single	可选：single / double / filled
toggle-position	按钮位置	select(radioGroup)	center	可选：start / center / end
toggle-offset-x	伸出偏移	number(unit=px)	15
toggle-offset-y	沿线偏移	number(unit=px)	0
toggle-length	按钮长度	number(unit=px,min=0)	60
toggle-thickness	按钮厚度	number(unit=px,min=0)	15
toggle-icon-size	图标大小	number(unit=px,min=0)	14
toggle-bg	按钮背景	color	—
toggle-hover-bg	悬浮背景	color	—
toggle-icon-color	图标颜色	color	—
toggle-border-color	按钮描边	color	rgba(255,255,255,0.16)

divider

属性	名称	类型	默认	说明
divider-visible	显示分隔线	boolean	true
divider-color	线条颜色	color	rgba(255,255,255,0.16)
divider-width	线条粗细	number(unit=px,min=0)	1

数据绑定

无组件特有数据绑定字段（纯样式 / 布局 / 装饰）。

事件

触发器

触发器在预览 / 播放态生效（编辑态点击 = 选中组件）。写在本组件 options.interactions 的 groups[].trigger 里。

触发器	名称	触发时机	payload（供动作公式 {:字段} 取值）
click	点击	点击本组件时触发	无
mouseEnter	鼠标移入	指针移入组件时触发	无
mouseLeave	鼠标移出	指针移出组件时触发	无
appear	入场	组件出现时触发（配合进场动画）	无
disappear	离场	组件消失时触发（配合退场动画）	无
receiveBehaviorEvent	接收行为事件	收到 sendBehaviorEvent 动作或宿主 ctx.emit 投递的事件时触发（按 eventName 匹配）	发送方携带的 data

动作

触发器命中后执行的动作。本组件既可发起动作（配在自己的交互里），也可作为其它组件动作的目标。

动作	名称	说明
openSidebar / closeSidebar / toggleSidebar	展开 / 收起侧板	其它组件（如按钮）以本侧边栏为动作目标，控制侧板展开 / 收起 / 切换
changeOption	修改设置	把本组件（或其它组件）的某个属性改为静态值 / 公式动态值
switchState	切换状态	切到多状态里的某个状态（state:"" 回默认态）
appear / disappear	进 / 退场动画	对目标 opacity 做 0↔100 插值的显隐动画

完整动作清单（switchScreen / switchWindow / openUrl / sendBehaviorEvent / transfer / executeScript / requestApi 等）与持久化写法见事件交互。

示例

{
  "type": "layout-sidebar",
  "uid": "w_layout_sidebar",
  "options": {
    "position": [40, 40],
    "size": [640, 400]
  }
}

变体示例：推挤模式 + 右侧停靠

默认（非悬浮）为推挤：侧板占位、主面板让位；折叠后主面板铺满。dock-side 支持四向，本例停靠右侧、resizable 开启可拖分隔线。

控制动作：按钮等组件可对本组件发 openSidebar / closeSidebar / toggleSidebar 动作驱动展开收起，见事件交互。

延伸阅读：组件手册总览 · 数据系统 · 事件交互。