หน้าจอแบ่ง

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

SplitScreen พื้นฐาน

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

tsx

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

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

ใช้การออกแบบของ Split Screen ที่มาถึง

เมื่อย้ายหน้าจอไปยัง Split Screen อื่น ข้อมูลป้ายชื่อจะถูกเก็บรักษาไว้ แต่การออกแบบการเรนเดอร์จะปฏิบัติตาม navigationTitleComponent ของ Split Screen ที่มาถึง

tsx

คำแนะนำการแบ่งและการปรับแต่ง UI เพิ่มเติม

titleWrapperComponent

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

titleCloseButtonComponent

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

dropGuideComponent

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

titleMoreButtonComponent

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

renderTitleMoreMenuItems

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

renderTitleMoreMenu

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

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

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

การจัดเรียงชื่อเรื่องและการแบ่งหน้าจอจะแยกพื้นที่วางออกจากกัน

ในพื้นที่ชื่อเรื่องจะจัดการเฉพาะการจัดเรียงแท็บ ดังนั้นคำแนะนำการแบ่งจะไม่แสดง หากลากชื่อไปยังพื้นที่ Split Screen จริงจะสามารถใช้การลากแบ่งหน้าจอเดิมได้

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

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

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

v1.0.0 จุดเริ่มต้นของ Next.js

FlexLayoutSplitScreen จะจัดการหน้าจอแบ่งเอง สำหรับการเรนเดอร์ page.tsx บนเซิร์ฟเวอร์ด้วย URL ใน Next.js ให้ใช้ DragBox จาก @byeolnaerim/flex-layout/next และ FlexLayoutNextSplitScreen ที่สร้างขึ้น

tsx

ตัวเลือกวงจรชีวิตสถานะ

preserveStateOnUnmount

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

screenKey

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

คุณสมบัติ lifecycle ที่เลิกใช้แล้ว

isResetOnChildrenChange จะไม่ถูกใช้ในพฤติกรรมการทำงานใน runtime อีกต่อไปและจะถูกลบออก isRemoveStoreOnUnmount ก็ถูกแทนที่ด้วย preserveStateOnUnmount และมีเพียง alias ที่เลิกใช้เพื่อความเข้ากันได้เท่านั้นที่ยังคงอยู่

การรีเฟรชและการกู้คืน URL ของเบราว์เซอร์

การเก็บรักษา pane URL ของ Next.js

เพื่อกู้คืนสถานะการแบ่งจนถึงการรีเฟรชเบราว์เซอร์ ให้กำหนด persistence ใน FlexLayoutNextSplitScreen ที่สร้างขึ้น จะจัดเก็บเฉพาะ metadata ของ Next URL pane ที่สามารถสร้างใหม่ได้เท่านั้น ไม่ได้จัดเก็บ ReactElement

tsx