Geteilte Ansicht

Konfigurieren Sie den Split Screen mit Drag & Drop, zentrierter Tab-Ausrichtung und Anpassungen der Titel-/Hinweis-/More-UI.

Standard-SplitScreen

FlexLayoutSplitScreenVerwaltet die Bereiche before/center/after im Store basierend auf der zentralen Komponente. Wenn ein DragBox auf diesen Bildschirm fallen gelassen wird, wird je nach Position eine Zeilen- oder Spaltenteilung erstellt, und Bildschirme, die im gleichen Center sind, werden wie Tabs verwaltet.

tsx

navigationTitle und Titel-Rendering

navigationTitleist die Label-Daten des Bildschirms und navigationTitleComponentist ein gemeinsamer Wrapper, der verwendet wird, wenn der Split Screen jedes Label als tatsächliche Titel-UI rendert. DragBox überträgt nur den navigationTitle-String und bewegt nicht die navigationTitleComponent.

Verwendet das Design des ankommenden Split Screens.

Wenn der Bildschirm in einen anderen Split Screen verschoben wird, bleiben die Titel-Label-Daten erhalten, aber das Rendering-Design folgt der navigationTitleComponent des ankommenden Split Screens.

tsx

Teilungsanleitung und More-UI-Anpassung

titleWrapperComponent

Ein gemeinsamer Wrapper, der navigationTitleComponent und titleCloseButtonComponent umschließt. Wenn weggelassen, wird kein separater DOM-Wrapper erstellt.

titleCloseButtonComponent

Ersetzt die Schließen-UI des Center-Tabs. Wenn undefined, wird die Standard-X-Schaltfläche verwendet, und wenn null, wird die Schließen-Schaltfläche ausgeblendet.

dropGuideComponent

Ersetzt die Standardanleitung-UI, die angezeigt wird, wenn in einen teilbaren Bereich gezogen wird. Wenn weggelassen, wird der Standardhinweis verwendet.

titleMoreButtonComponent

Ersetzt nur den ...-Trigger rechts vom Titel. Wenn undefined, wird die Standardtaste verwendet, und wenn null, wird More ausgeblendet.

renderTitleMoreMenuItems

Behält das Standard-Mehr-Menü bei und fügt Benutzer-Menüelemente darunter hinzu.

renderTitleMoreMenu

Ersetzt den gesamten Inhalt des Standardmenüs. Portal, Positionsberechnung, Klick außerhalb und Escape zum Schließen werden weiterhin von der Bibliothek verarbeitet.

tsx

Standard-Mehr-Menü und erweiterter Kontext

Das Standard-Mehr-Menü bietet das Schließen des aktuellen Tabs, das Schließen aller anderen Tabs, das Schließen aller rechten Tabs, das Schließen aller Tabs des aktuellen Splits und das Öffnen in einem neuen Fenster, wenn openUrl vorhanden ist.

identity

rootName, layoutName, containerName, screenKey

active tab

activeItem, activeIndex

tabs

items

actions

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

availability

canCloseOtherTabs, canCloseTabsToRight, canOpenInNewWindow

Das Menü wird als React-Portal in document.body gerendert. Es wird basierend auf der tatsächlichen Größe von Trigger und Menü im Viewport platziert und die Position wird bei Scrollen/Ändern der Größe neu berechnet, sodass es nicht im Overflow des Split Screens abgeschnitten wird.

Ändern der Reihenfolge der center-Tab-Titel

Die Titel der center-Tabs im gleichen Split Screen können durch Ziehen in eine andere Reihenfolge gebracht werden. Wenn Sie die linke Hälfte des Zieltitels ablegen, wird er nach vorne verschoben, und wenn Sie die rechte Hälfte ablegen, wird er nach hinten verschoben, wobei der aktive Tab basierend auf screenKey beibehalten wird.

Titelreihenfolge und Bildschirmteilung haben separate Drop-Bereiche.

Im Titelbereich wird nur die Tab-Ausrichtung behandelt, sodass keine Teilungsanleitung angezeigt wird. Wenn Sie den Titel in den tatsächlichen Split Screen-Bereich ziehen, können Sie die vorhandene Drag-Operation für die Bildschirmteilung weiterhin verwenden.

Abbrechen des Drag mit Escape

Wenn Sie während des Ziehens von DragBox die Escape-Taste drücken, werden der aktuelle Drag-Klon und der ausstehende Drag-Zustand bereinigt und isDragging false / isDrop false wird propagiert. Die Teilungsanleitung-UI verschwindet sofort, und auch bei einem späteren Maus-/Touch-Ende wird kein Drop ausgeführt.

Bildschirm-Drop über URL in Next.js

v1.0.0 Next.js Einstiegspunkt

FlexLayoutSplitScreen verwaltet weiterhin den Split-Screen. Um page.tsx in Next.js nur über die URL serverseitig zu rendern, verwenden Sie DragBox von @byeolnaerim/flex-layout/next und das erzeugte FlexLayoutNextSplitScreen.

tsx

Statuslebenszyklusoptionen

preserveStateOnUnmount

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

screenKey

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

Veraltete Lifecycle-Props

isResetOnChildrenChange wird nicht mehr zur Laufzeit verwendet und soll entfernt werden. isRemoveStoreOnUnmount wurde durch preserveStateOnUnmount ersetzt, und es bleibt nur ein kompatibler veralteter Alias.

Aktualisierung und Wiederherstellung der Browser-URL

Next.js URL-Pane-Persistenz

Um den Split-Zustand bis zur Browseraktualisierung wiederherzustellen, geben Sie persistence im erzeugten FlexLayoutNextSplitScreen an. Es werden keine ReactElemente gespeichert, sondern nur die Metadaten des wiederherstellbaren Next URL-Panes in den Speicher gespeichert.

tsx