分屏
在分屏中配置拖放分割、中心标签对齐、标题/指引/更多UI自定义.
默认 SplitScreen
FlexLayoutSplitScreen以中央组件为基准管理before/center/after区域的存储。当DragBox被放置在此屏幕上时,根据位置生成行或列分割,进入同一中心的屏幕像标签一样管理.
navigationTitle和标题渲染
navigationTitle是屏幕的标签数据, navigationTitleComponent是分屏在实际标题UI渲染每个标签时使用的公共包装器。DragBox仅传递navigationTitle字符串,不携带navigationTitleComponent.
分割指引和更多UI自定义
titleWrapperComponent
一个共同的包装器,包裹 navigationTitleComponent 和 titleCloseButtonComponent。如果省略,则不会创建单独的 DOM 包装器。
titleCloseButtonComponent
替换 center 标签的关闭 UI。如果为 undefined,则使用默认的 X 按钮;如果为 null,则隐藏关闭按钮。
dropGuideComponent
替换拖动到可分割区域时显示的默认指引UI。省略时使用默认指引文本.
titleMoreButtonComponent
仅替换标题右侧的...触发器。如果为undefined则使用默认按钮,null则隐藏更多.
renderTitleMoreMenuItems
在保持默认更多菜单的同时,在下面添加用户菜单项.
renderTitleMoreMenu
完全替换默认菜单内容。Portal、位置计算、外部点击、Escape关闭由库继续处理.
中心标签标题顺序更改
可以通过拖动同一分屏的中心标签标题来更改顺序。将目标标题放在左半边则向前移动,右半边则向后移动,激活标签基于screenKey保持不变.
使用Escape取消拖动
在拖动DragBox时按Escape将清理当前拖动克隆和待处理拖动状态,并传播isDragging false / isDrop false状态。分割指引UI会立即消失,之后的鼠标/触摸结束也不会执行drop.
在 Next.js 中通过 URL 进行屏幕拖放
状态生命周期选项
preserveStateOnUnmount
true면 FlexLayoutSplitScreen이 언마운트되어도 현재 JavaScript runtime의 in-memory split store를 유지합니다. 브라우저 새로고침 persistence와는 별개이며 기본값은 false입니다.
screenKey
split screen 내 화면을 식별하는 key입니다. 생략하면 내부에서 생성됩니다.