หน้าจอแบ่ง

จัดการ Split Screen ที่มีการปรับแต่ง UI สำหรับการลากและวาง การจัดตำแหน่งแท็บกลาง ชื่อ/คำแนะนำ/เพิ่มเติม

SplitScreen พื้นฐาน

FlexLayoutSplitScreenจัดการพื้นที่ก่อน/กลาง/หลังใน store โดยอิงจากคอมโพเนนต์กลาง เมื่อ DragBox ถูกวางบนหน้าจอนี้ จะมีการสร้างการแบ่งแถวหรือคอลัมน์ตามตำแหน่ง และหน้าจอที่เข้ามาในกลางจะถูกจัดการเหมือนแท็บ

tsx
<FlexLayoutSplitScreen
  layoutName="editor-split"
  containerName="editor-home"
  navigationTitle="Home"
>
  <HomeView />
</FlexLayoutSplitScreen>

navigationTitle และการเรนเดอร์ชื่อเรื่อง

navigationTitleเป็นข้อมูลป้ายของหน้าจอ และ navigationTitleComponentเป็น wrapper ทั่วไปที่ใช้เมื่อ Split Screen เรนเดอร์แต่ละป้ายเป็น UI ชื่อจริง DragBox จะส่งผ่านเฉพาะสตริง navigationTitle และไม่ย้าย navigationTitleComponent

tsx
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

เป็น wrapper ทั่วไปที่ห่อหุ้ม navigationTitleComponent และ titleCloseButtonComponent หากไม่ระบุจะไม่สร้าง DOM wrapper แยกต่างหาก

titleCloseButtonComponent

แท็บกลางจะเปลี่ยน UI ปุ่มปิด หากเป็น undefined จะใช้ปุ่ม X เริ่มต้น และหากเป็น null จะซ่อนปุ่มปิด

dropGuideComponent

แทนที่ UI คำแนะนำพื้นฐานที่แสดงเมื่อลากไปยังพื้นที่ที่แบ่งได้ หากไม่ระบุจะใช้ข้อความคำแนะนำพื้นฐาน

titleMoreButtonComponent

แทนที่เฉพาะทริกเกอร์ ... ทางด้านขวาของชื่อเรื่อง หากเป็น undefined จะใช้ปุ่มพื้นฐาน และหากเป็น null จะซ่อนเพิ่มเติม

renderTitleMoreMenuItems

รักษาเมนูเพิ่มเติมพื้นฐานและเพิ่มรายการเมนูผู้ใช้ด้านล่าง

renderTitleMoreMenu

แทนที่เนื้อหาเมนูพื้นฐานทั้งหมด ไลบรารีจะจัดการการคำนวณตำแหน่ง คลิกนอก และการปิดด้วย Escape ต่อไป

tsx
<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>

เมนูเพิ่มเติมพื้นฐานและบริบทที่ขยาย

เมนูเพิ่มเติมพื้นฐานมีการปิดแท็บปัจจุบัน ปิดแท็บทั้งหมด ปิดแท็บทางขวาทั้งหมด ปิดแท็บทั้งหมดในส่วนแบ่งปัจจุบัน และเปิดในหน้าต่างใหม่เมื่อมี 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 วางตามขนาดจริงของทริกเกอร์และเมนูภายใน viewport และคำนวณตำแหน่งใหม่เมื่อ scroll/resize ดังนั้นจึงไม่ถูกตัดขาดใน Split Screen

เปลี่ยนลำดับชื่อแท็บกลาง

สามารถลากชื่อแท็บกลางใน Split Screen เดียวกันเพื่อเปลี่ยนลำดับ หากวางที่ครึ่งซ้ายของชื่อเป้าหมายจะย้ายไปข้างหน้า หากวางที่ครึ่งขวาจะย้ายไปข้างหลัง และแท็บที่ใช้งานจะถูกเก็บตาม screenKey

ยกเลิกการลากด้วย Escape

เมื่อกด Escape ขณะลาก DragBox จะทำการล้าง clone ปัจจุบันและสถานะการลากที่รอดอยู่ และส่งต่อสถานะ isDragging false / isDrop false คำแนะนำ UI การแบ่งจะหายไปทันทีและจะไม่มีการวางใน mouse/touch สิ้นสุดต่อไป

ดรอปหน้าจอด้วย URL ใน Next.js

tsx
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 ของเบราว์เซอร์

tsx
<FlexLayoutNextSplitScreen
  persistence={{
    storage: "auto",
    restoreOnReload: true,
    syncWithBrowserUrl: true,
  }}
>
  <FlexLayoutSplitScreen
    layoutName="editor-split"
    containerName="editor-home"
    navigationTitle="Home"
  >
    <HomeView />
  </FlexLayoutSplitScreen>
</FlexLayoutNextSplitScreen>
© 2026 Byeolnaerim. สงวนลิขสิทธิ์.แนะนำนโยบายการจัดการข้อมูลส่วนบุคคล