Pantalla Dividida

Configura la pantalla dividida con arrastrar y soltar, alineación de pestañas al centro, y personalización de UI de título/guía/More.

Pantalla dividida predeterminada

FlexLayoutSplitScreenAdministra las áreas before/center/after en el store basado en el componente central. Cuando se suelta un DragBox en esta pantalla, se crea una división en fila o columna según la posición, y las pantallas que entran en el centro se gestionan como pestañas.

tsx

Renderización de navigationTitle y título.

navigationTitle.es el dato de etiqueta de la pantalla y, navigationTitleComponent.es un wrapper común utilizado cuando la pantalla dividida renderiza cada etiqueta como UI de título real. DragBox solo pasa la cadena navigationTitle y no lleva el navigationTitleComponent.

Utiliza el diseño de la pantalla dividida que ha llegado.

Al mover la pantalla a otra pantalla dividida, los datos de la etiqueta del título se mantienen, pero el diseño de renderización sigue el navigationTitleComponent de la pantalla dividida de destino.

tsx

Guía de división y personalización de UI de More.

titleWrapperComponent

Un envoltorio común que envuelve tanto navigationTitleComponent como titleCloseButtonComponent. Si se omite, no se crea un envoltorio DOM separado.

titleCloseButtonComponent

Reemplaza la UI de cierre de la pestaña central. Si es undefined, se usa el botón X predeterminado, y si es null, se oculta el botón de cierre.

dropGuideComponent

Reemplaza la UI de guía básica que se muestra al arrastrar a un área dividible. Si se omite, se utiliza el mensaje de guía predeterminado.

titleMoreButtonComponent

Solo reemplaza el ... disparador a la derecha del título. Si es undefined, se utiliza el botón predeterminado y si es null, se oculta More.

renderTitleMoreMenuItems

Mantiene el menú More predeterminado y agrega elementos de menú de usuario debajo.

renderTitleMoreMenu

Reemplaza todo el contenido del menú predeterminado. Portal, cálculo de posición, clics externos y cierre con Escape son manejados por la biblioteca.

tsx

Menú More predeterminado y contexto extendido.

El menú More predeterminado ofrece cerrar la pestaña actual, cerrar todas las demás pestañas, cerrar todas las pestañas a la derecha, cerrar todas las pestañas de la división actual y abrir en una nueva ventana si hay openUrl.

identity

rootName, layoutName, containerName, screenKey

active tab

activeItem, activeIndex

tabs

items

actions

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

availability

canCloseOtherTabs, canCloseTabsToRight, canOpenInNewWindow

El menú se renderiza como un React Portal en document.body. Se coloca dentro del viewport basado en el tamaño real del trigger y del menú, y recalcula la posición al hacer scroll/redimensionar, por lo que no se corta en el overflow interno de la pantalla dividida.

Cambiar el orden de los títulos de las pestañas del centro.

Se puede arrastrar el título de la pestaña del centro de la misma pantalla dividida para cambiar su orden. Si se coloca en la mitad izquierda del título objetivo, se mueve hacia adelante, y si se coloca en la mitad derecha, se mueve hacia atrás, manteniendo la pestaña activa según screenKey.

El reordenamiento de títulos y la división de pantalla tienen áreas de drop separadas.

En el área de títulos, solo se maneja el orden de las pestañas, por lo que no se muestra la guía de división. Si se arrastra un título fuera del área de la pantalla dividida real, se puede usar el comportamiento de arrastre de división de pantalla existente.

Cancelar arrastre con Escape.

Si se presiona Escape mientras se arrastra el DragBox, se limpia el clone de arrastre actual y el estado de arrastre pendiente, y se propaga isDragging false / isDrop false. La UI de guía de división desaparece de inmediato y no se ejecuta el drop en el final del mouse/touch.

Pantalla de caída a través de URL en Next.js

Entrada de Next.js v1.0.0

FlexLayoutSplitScreen en sí mismo gestiona la pantalla dividida. Para renderizar page.tsx en el servidor solo con la URL en Next.js, utiliza DragBox de @byeolnaerim/flex-layout/next y el FlexLayoutNextSplitScreen generado.

tsx

opciones del ciclo de vida del estado

preserveStateOnUnmount

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

screenKey

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

Props de ciclo de vida obsoletas

isResetOnChildrenChange ya no se utiliza en el comportamiento de tiempo de ejecución y se eliminará. isRemoveStoreOnUnmount también ha sido reemplazado por preserveStateOnUnmount, y solo queda un alias obsoleto para compatibilidad.

Restauración de la URL del navegador y actualización

Persistencia del panel de URL de Next.js

Para restaurar el estado de división hasta la actualización del navegador, especifica la persistencia en el FlexLayoutNextSplitScreen generado. No se almacenan ReactElements, solo se guardan los metadatos del panel de URL de Next que se pueden regenerar.

tsx