停靠布局 layout-dock

上 / 下 / 左 / 右停靠区 + 中间主区，做「顶栏 + 侧栏 + 主内容」骨架。

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

实时预览

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

属性

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

basic

属性	名称	类型	默认	说明
left-enabled	启用左侧	boolean	true
right-enabled	启用右侧	boolean	true
bottom-enabled	启用底部	boolean	true
top-enabled	启用顶部	boolean	false
left-size	左侧尺寸	string	360px
right-size	右侧尺寸	string	320px
bottom-size	底部尺寸	string	260px
top-size	顶部尺寸	string	120px
left-default-state	左侧默认状态	select(radioGroup)	expanded	可选：expanded / collapsed
right-default-state	右侧默认状态	select(radioGroup)	expanded	可选：expanded / collapsed
bottom-default-state	底部默认状态	select(radioGroup)	expanded	可选：expanded / collapsed
top-default-state	顶部默认状态	select(radioGroup)	collapsed	可选：expanded / collapsed
overlay	悬浮覆盖	boolean	false
resizable	运行态可调	boolean	true

toggle

属性	名称	类型	默认	说明
toggle-visible	显示按钮	boolean	true
toggle-template	按钮样式	select(radioGroup)	default	可选：default / rect
toggle-icon-style	图标样式	select(radioGroup)	double	可选：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

动作

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

动作	名称	说明
openDockEdge / closeDockEdge / toggleDockEdge	展开 / 收起停靠边	按动作参数 edge（left / right / top / bottom）控制对应边的展开收起，供按钮等组件调用
changeOption	修改设置	把本组件（或其它组件）的某个属性改为静态值 / 公式动态值
switchState	切换状态	切到多状态里的某个状态（state:"" 回默认态）
appear / disappear	进 / 退场动画	对目标 opacity 做 0↔100 插值的显隐动画

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

示例

{
  "type": "layout-dock",
  "uid": "w_layout_dock",
  "options": {
    "position": [40, 40],
    "size": [960, 640]
  }
}

变体示例：悬浮覆盖（overlay）

overlay: true 时边栏浮在主区上方，展开不挤压主区；折叠后仅留折叠按钮。下例右侧 / 底部初始折叠，点箭头浮出。

控制动作：按钮等组件可对本组件发 openDockEdge / closeDockEdge / toggleDockEdge 动作（参数 edge: left/right/top/bottom）驱动展开收起，见事件交互。

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