Chia màn hình

Cấu hình trên Split Screen với phân chia kéo và thả, căn giữa tab, tùy chỉnh giao diện tiêu đề/hướng dẫn/Thêm.

Màn hình chia mặc định

FlexLayoutSplitScreenQuản lý các khu vực before/center/after trong store dựa trên thành phần trung tâm. Khi DragBox được thả lên màn hình này, sẽ tạo ra phân chia hàng hoặc cột tùy theo vị trí, và màn hình vào cùng center sẽ được quản lý như các tab.

tsx

Tiêu đề điều hướng và hiển thị tiêu đề.

Tiêu đề điều hướng.là dữ liệu nhãn của màn hình, Thành phần tiêu đề điều hướng.là wrapper chung được sử dụng khi Split Screen hiển thị thực tế các nhãn dưới dạng giao diện tiêu đề. DragBox chỉ truyền chuỗi tiêu đề điều hướng mà không di chuyển thành phần tiêu đề điều hướng.

Sử dụng thiết kế của Split Screen đã đến.

Khi di chuyển màn hình sang Split Screen khác, dữ liệu nhãn tiêu đề sẽ được giữ lại, nhưng thiết kế hiển thị sẽ theo thành phần tiêu đề điều hướng của Split Screen đã đến.

tsx

Hướng dẫn phân chia và tùy chỉnh giao diện Thêm.

titleWrapperComponent

Bộ bọc chung bao quanh navigationTitleComponent và titleCloseButtonComponent. Nếu bỏ qua, sẽ không tạo bộ bọc DOM riêng.

titleCloseButtonComponent

Thay thế UI đóng của tab center. Nếu là undefined, sẽ sử dụng nút X mặc định, và nếu là null, sẽ ẩn nút đóng.

dropGuideComponent

Thay thế giao diện hướng dẫn mặc định hiển thị khi kéo vào khu vực có thể phân chia. Nếu bỏ qua, sẽ sử dụng văn bản hướng dẫn mặc định.

titleMoreButtonComponent

Chỉ thay thế trình kích hoạt ... bên phải tiêu đề. Nếu là undefined sẽ sử dụng nút mặc định và nếu là null sẽ ẩn Thêm.

renderTitleMoreMenuItems

Giữ lại menu Thêm mặc định và thêm các mục menu người dùng bên dưới.

renderTitleMoreMenu

Thay thế toàn bộ nội dung menu mặc định. Portal, tính toán vị trí, nhấp bên ngoài, đóng bằng Escape sẽ được thư viện xử lý liên tục.

tsx

Menu Thêm mặc định và ngữ cảnh mở rộng.

Menu Thêm mặc định cung cấp đóng tab hiện tại, đóng tất cả các tab khác, đóng tất cả các tab bên phải, đóng tất cả các tab của phân chia hiện tại, và mở trong cửa sổ mới khi có openUrl.

identity

rootName, layoutName, containerName, screenKey

active tab

activeItem, activeIndex

tabs

items

actions

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

availability

canCloseOtherTabs, canCloseTabsToRight, canOpenInNewWindow

Menu sẽ được hiển thị dưới dạng React Portal trên document.body. Nó được đặt trong viewport dựa trên kích thước thực tế của trigger và menu, và sẽ tính toán lại vị trí khi cuộn/thay đổi kích thước, do đó không bị cắt trong overflow của Split Screen.

Thay đổi thứ tự tiêu đề tab trung tâm.

Có thể kéo tiêu đề tab trung tâm của cùng một Split Screen để thay đổi thứ tự. Nếu đặt bên trái nửa tiêu đề mục tiêu, nó sẽ di chuyển lên trước, nếu đặt bên phải nửa tiêu đề mục tiêu, nó sẽ di chuyển ra sau, và tab đang hoạt động sẽ được giữ theo screenKey.

Thay đổi thứ tự tiêu đề và phân chia màn hình sẽ tách biệt khu vực thả.

Trong khu vực tiêu đề chỉ xử lý sắp xếp tab, vì vậy hướng dẫn phân chia sẽ không được hiển thị. Kéo tiêu đề ra ngoài khu vực Split Screen thực tế sẽ cho phép sử dụng hành động kéo của phân chia màn hình hiện tại.

Hủy kéo bằng Escape.

Khi nhấn Escape trong khi kéo DragBox, nó sẽ dọn dẹp clone kéo hiện tại và trạng thái kéo đang chờ, và truyền đạt trạng thái isDragging false / isDrop false. Giao diện hướng dẫn phân chia sẽ ngay lập tức biến mất và không có thả nào được thực hiện sau khi kết thúc mouse/touch.

Kéo màn hình từ URL trong Next.js

v1.0.0 Điểm vào Next.js

FlexLayoutSplitScreen tự quản lý màn hình phân chia. Để thực hiện server rendering page.tsx chỉ với URL trong Next.js, hãy sử dụng DragBox từ @byeolnaerim/flex-layout/next và FlexLayoutNextSplitScreen đã tạo.

tsx

tùy chọn vòng đời trạng thái

preserveStateOnUnmount

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

screenKey

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

Các thuộc tính vòng đời đã lỗi thời

isResetOnChildrenChange không còn được sử dụng trong hành vi runtime và sẽ bị loại bỏ. isRemoveStoreOnUnmount cũng đã được thay thế bằng preserveStateOnUnmount và chỉ còn lại alias đã lỗi thời để tương thích.

Khôi phục khi làm mới và URL trình duyệt

Persistence pane URL trong Next.js

Để khôi phục trạng thái phân chia cho đến khi làm mới trình duyệt, hãy chỉ định persistence cho FlexLayoutNextSplitScreen đã tạo. Chỉ lưu metadata của pane URL Next có thể tái tạo, không lưu ReactElement.

tsx