Tela Dividida

Configura o Split Screen com divisão por arrastar e soltar, alinhamento de guia central e personalização de UI de título/instrução/mais.

Tela Dividida Padrão

FlexLayoutSplitScreenGerencia as áreas before/center/after no store com base no componente central. Quando um DragBox é solto nesta tela, uma divisão em linha ou coluna é criada dependendo da posição, e as telas que entram no centro são gerenciadas como guias.

tsx

Renderização de navigationTitle e título.

navigationTitle.é o dado do rótulo da tela e, navigationTitleComponent.é um wrapper comum usado quando o Split Screen renderiza cada rótulo como uma UI de título real. O DragBox apenas transmite a string navigationTitle e não carrega o navigationTitleComponent.

Usa o design do Split Screen recebido.

Ao mover a tela para outro Split Screen, os dados do rótulo do título são mantidos, mas o design de renderização segue o navigationTitleComponent do Split Screen recebido.

tsx

Instruções de divisão e personalização de UI de mais.

titleWrapperComponent

Um wrapper comum que envolve o navigationTitleComponent e o titleCloseButtonComponent. Se omitido, não será criado um wrapper DOM separado.

titleCloseButtonComponent

Substitui a UI de fechamento da aba central. Se undefined, usa o botão X padrão, e se null, oculta o botão de fechamento.

dropGuideComponent

Substitui a UI de instrução padrão exibida ao arrastar para uma área divisível. Se omitido, usa a mensagem de instrução padrão.

titleMoreButtonComponent

Substitui apenas o gatilho ... à direita do título. Se undefined, usa o botão padrão e se null, oculta o Mais.

renderTitleMoreMenuItems

Mantém o menu padrão de Mais e adiciona itens de menu do usuário abaixo.

renderTitleMoreMenu

Substitui todo o conteúdo do menu padrão. Portal, cálculo de posição, clique externo e fechamento com Escape continuam sendo tratados pela biblioteca.

tsx

Menu padrão de Mais e contexto expandido.

O menu padrão de Mais oferece fechar guia atual, fechar todas as outras guias, fechar todas as guias à direita, fechar todas as guias da divisão atual e abrir em nova janela se openUrl estiver presente.

identity

rootName, layoutName, containerName, screenKey

active tab

activeItem, activeIndex

tabs

items

actions

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

availability

canCloseOtherTabs, canCloseTabsToRight, canOpenInNewWindow

O menu é renderizado como um React Portal em document.body. É posicionado dentro do viewport com base no tamanho real do gatilho e do menu, e recalcula a posição em scroll/redimensionamento, evitando cortes no overflow interno do Split Screen.

Alterar a ordem dos títulos das guias centrais.

Os títulos das guias centrais do mesmo Split Screen podem ser arrastados para alterar a ordem. Se colocado na metade esquerda do título alvo, move para frente, se na metade direita, move para trás, mantendo a guia ativa com base no screenKey.

A reordenação do título e a divisão da tela têm áreas de drop separadas.

Na área do título, apenas a ordenação das guias é tratada, portanto, as instruções de divisão não são exibidas. Se você arrastar o título para fora da área real do Split Screen, poderá usar a ação de arrastar da divisão de tela existente.

Cancelar arrasto com Escape.

Se você pressionar Escape enquanto arrasta o DragBox, ele limpa o clone de arrasto atual e o estado de arrasto pendente, propagando isDragging false / isDrop false. A UI de instrução de divisão desaparece imediatamente e o drop não será executado mesmo após o término do mouse/touch.

Arraste a tela para a URL no Next.js

v1.0.0 Entrada do Next.js

O FlexLayoutSplitScreen gerencia a tela dividida. Para renderizar page.tsx no servidor apenas com a URL no Next.js, use o DragBox de @byeolnaerim/flex-layout/next e o FlexLayoutNextSplitScreen gerado.

tsx

opções de ciclo de vida do estado

preserveStateOnUnmount

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

screenKey

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

Propriedades de ciclo de vida obsoletas

isResetOnChildrenChange não é mais usado no comportamento em tempo de execução e será removido. isRemoveStoreOnUnmount foi substituído por preserveStateOnUnmount, e apenas um alias obsoleto compatível permanece.

Atualização e restauração da URL do navegador

Persistência do painel de URL do Next.js

Para restaurar o estado de divisão até a atualização do navegador, especifique a persistência no FlexLayoutNextSplitScreen gerado. Não armazena o ReactElement, apenas os metadados do painel de URL do Next que podem ser recriados.

tsx