Layar Terpisah

Konfigurasi di Split Screen dengan drag and drop pembagian, penyelarasan tab tengah, dan kustomisasi UI judul/panduan/More.

SplitScreen default

FlexLayoutSplitScreenMengelola area before/center/after di store berdasarkan komponen tengah. Ketika DragBox dijatuhkan di layar ini, pembagian row atau column dibuat tergantung pada posisinya, dan layar yang masuk ke center dikelola seperti tab.

tsx

Judul navigasi dan rendering judul

Judul navigasiadalah data label layar, komponen judul navigasiadalah wrapper umum yang digunakan saat Split Screen merender setiap label menjadi UI judul yang sebenarnya. DragBox hanya mengirimkan string judul navigasi dan tidak membawa komponen judul navigasi.

Menggunakan desain Split Screen yang diterima.

Ketika layar dipindahkan ke Split Screen lain, data label judul tetap dipertahankan, tetapi desain rendering mengikuti komponen judul navigasi dari Split Screen yang diterima.

tsx

Panduan pembagian dan kustomisasi UI More

titleWrapperComponent

Wrapper umum yang membungkus navigationTitleComponent dan titleCloseButtonComponent. Jika diabaikan, tidak akan membuat wrapper DOM terpisah.

titleCloseButtonComponent

Mengganti UI tutup tab center. Jika undefined, tombol X default akan digunakan, dan jika null, tombol tutup akan disembunyikan.

dropGuideComponent

Mengganti UI panduan dasar yang ditampilkan saat diseret ke area yang dapat dibagi. Jika diabaikan, akan menggunakan teks panduan default.

titleMoreButtonComponent

Hanya mengganti pemicu ... di sebelah kanan judul. Jika undefined, menggunakan tombol default dan jika null, menyembunyikan More.

renderTitleMoreMenuItems

Menambahkan item menu pengguna di bawah menu More dasar.

renderTitleMoreMenu

Sepenuhnya mengganti konten menu dasar. Portal, perhitungan posisi, klik luar, dan penutupan Escape akan terus diproses oleh pustaka.

tsx

Menu More dasar dan konteks yang diperluas

Menu More dasar menyediakan penutupan tab saat ini, penutupan semua tab lain, penutupan semua tab di sebelah kanan, penutupan semua tab di pembagian saat ini, dan membuka di jendela baru jika openUrl ada.

identity

rootName, layoutName, containerName, screenKey

active tab

activeItem, activeIndex

tabs

items

actions

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

availability

canCloseOtherTabs, canCloseTabsToRight, canOpenInNewWindow

Menu dirender ke dalam document.body sebagai React Portal. Ditempatkan di dalam viewport berdasarkan ukuran aktual trigger dan menu, dan menghitung ulang posisi saat scroll/resize sehingga tidak terpotong di dalam overflow Split Screen.

Mengubah urutan judul tab tengah

Judul tab tengah di Split Screen yang sama dapat diubah urutannya dengan drag. Jika diletakkan di setengah kiri judul target, akan bergerak ke depan, dan jika diletakkan di setengah kanan, akan bergerak ke belakang, sementara tab aktif tetap berdasarkan screenKey.

Reorder judul dan pembagian layar memiliki area drop yang terpisah.

Di area judul, hanya pengurutan tab yang diproses sehingga panduan pembagian tidak ditampilkan. Jika judul diseret keluar ke area Split Screen yang sebenarnya, dapat menggunakan tindakan drag pembagian layar yang ada.

Batalkan drag dengan Escape

Jika Escape ditekan saat menyeret DragBox, akan membersihkan clone drag saat ini dan status drag yang tertunda serta menyebarkan isDragging false / isDrop false. UI panduan pembagian akan segera menghilang dan drop tidak akan dieksekusi bahkan setelah mouse/touch berakhir.

Seret layar ke URL di Next.js

v1.0.0 Entri Next.js

FlexLayoutSplitScreen itu sendiri tetap mengelola tampilan split. Untuk merender page.tsx di server hanya dengan URL di Next.js, gunakan DragBox dari @byeolnaerim/flex-layout/next dan FlexLayoutNextSplitScreen yang dihasilkan.

tsx

opsi siklus hidup status

preserveStateOnUnmount

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

screenKey

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

Properti siklus hidup yang sudah tidak digunakan

isResetOnChildrenChange tidak lagi digunakan dalam perilaku runtime dan akan dihapus. isRemoveStoreOnUnmount juga telah digantikan oleh preserveStateOnUnmount, dan hanya alias deprecated untuk kompatibilitas yang tersisa.

Penyegaran dan pemulihan URL browser

Persistence pane URL Next.js

Untuk memulihkan status split hingga penyegaran browser, tentukan persistence pada FlexLayoutNextSplitScreen yang dihasilkan. Hanya metadata pane URL Next yang dapat dibuat kembali yang akan disimpan di storage, bukan ReactElement.

tsx