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

<FlexLayoutSplitScreen
  layoutName="editor-split"
  containerName="editor-home"
  navigationTitle="Home"
>
  <HomeView />
</FlexLayoutSplitScreen>

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

function SplitScreenTitle({ children }: { children?: React.ReactNode }) {
  return <strong className="split-title">{children}</strong>;
}

<FlexLayoutSplitScreen
  layoutName="editor-split"
  containerName="editor-home"
  navigationTitle="Home"
  navigationTitleComponent={<SplitScreenTitle />}
>
  <HomeView />
</FlexLayoutSplitScreen>

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

<FlexLayoutSplitScreen
  layoutName="editor-split"
  containerName="editor-home"
  navigationTitle="Home"
  titleWrapperComponent={<div className="split-tab" />}
  titleCloseButtonComponent={<button type="button">Close</button>}
  dropGuideComponent={<div>Drop here</div>}
  titleMoreButtonComponent={<button type="button">Menu</button>}
  renderTitleMoreMenuItems={(context) => (
    <button
      type="button"
      onClick={() => {
        console.log(context.activeItem);
        context.closeMenu();
      }}
    >
      Custom action
    </button>
  )}
>
  <HomeView />
</FlexLayoutSplitScreen>

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

import { FlexLayoutSplitScreenDragBox } from "@byeolnaerim/flex-layout/next";

<FlexLayoutSplitScreenDragBox
  url="/orders/1"
  containerName="order-1"
  navigationTitle="Order #1"
>
  <button type="button">Order #1</button>
</FlexLayoutSplitScreenDragBox>

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

<FlexLayoutNextSplitScreen
  persistence={{
    storage: "auto",
    restoreOnReload: true,
    syncWithBrowserUrl: true,
  }}
>
  <FlexLayoutSplitScreen
    layoutName="editor-split"
    containerName="editor-home"
    navigationTitle="Home"
  >
    <HomeView />
  </FlexLayoutSplitScreen>
</FlexLayoutNextSplitScreen>