我的文档库

多根目录侧边栏

flex-layout

  • Getting Started

  • Guides

  • Reference

typed-rx-http

  • Getting Started

  • Guides

  • Reference

global-rx-state

  • Getting Started

  • Guides

  • Reference

webflux-fe-dev-assistant

reactive-mongo-dsl

分屏

在分屏中配置拖放分割、中心标签对齐、标题/指引/更多UI自定义.


默认 SplitScreen

FlexLayoutSplitScreen以中央组件为基准管理before/center/after区域的存储。当DragBox被放置在此屏幕上时,根据位置生成行或列分割,进入同一中心的屏幕像标签一样管理.

tsx
navigationTitle和标题渲染

navigationTitle是屏幕的标签数据, navigationTitleComponent是分屏在实际标题UI渲染每个标签时使用的公共包装器。DragBox仅传递navigationTitle字符串,不携带navigationTitleComponent.

tsx
分割指引和更多UI自定义

titleWrapperComponent

一个共同的包装器,包裹 navigationTitleComponent 和 titleCloseButtonComponent。如果省略,则不会创建单独的 DOM 包装器。

titleCloseButtonComponent

替换 center 标签的关闭 UI。如果为 undefined,则使用默认的 X 按钮;如果为 null,则隐藏关闭按钮。

dropGuideComponent

替换拖动到可分割区域时显示的默认指引UI。省略时使用默认指引文本.

titleMoreButtonComponent

仅替换标题右侧的...触发器。如果为undefined则使用默认按钮,null则隐藏更多.

renderTitleMoreMenuItems

在保持默认更多菜单的同时,在下面添加用户菜单项.

renderTitleMoreMenu

完全替换默认菜单内容。Portal、位置计算、外部点击、Escape关闭由库继续处理.

tsx
默认更多菜单和扩展上下文

默认更多菜单提供当前标签关闭、关闭所有其他标签、关闭所有右侧标签、关闭当前分割的所有标签、在存在openUrl时在新窗口中打开.

identity

rootName, layoutName, containerName, screenKey

active tab

activeItem, activeIndex

tabs

items

actions

closeMenu(), closeCurrentTab(), closeOtherTabs(), closeTabsToRight(), closeAllTabs(), openInNewWindow()

availability

canCloseOtherTabs, canCloseTabsToRight, canOpenInNewWindow

菜单在document.body中以React Portal渲染。根据trigger和menu的实际大小放置在视口内,并在滚动/调整大小时重新计算位置,因此不会在分屏内部溢出.

中心标签标题顺序更改

可以通过拖动同一分屏的中心标签标题来更改顺序。将目标标题放在左半边则向前移动,右半边则向后移动,激活标签基于screenKey保持不变.

使用Escape取消拖动

在拖动DragBox时按Escape将清理当前拖动克隆和待处理拖动状态,并传播isDragging false / isDrop false状态。分割指引UI会立即消失,之后的鼠标/触摸结束也不会执行drop.

在 Next.js 中通过 URL 进行屏幕拖放
tsx
状态生命周期选项

preserveStateOnUnmount

true면 FlexLayoutSplitScreen이 언마운트되어도 현재 JavaScript runtime의 in-memory split store를 유지합니다. 브라우저 새로고침 persistence와는 별개이며 기본값은 false입니다.

screenKey

split screen 내 화면을 식별하는 key입니다. 생략하면 내부에서 생성됩니다.

刷新和浏览器 URL 恢复
tsx
© 2026 Byeolnaerim. 保留所有权利.介绍隐私政策