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