Arrastar Caixa

FlexLayoutSplitScreenDragBoxos filhos de são a UI que o usuário interage, targetComponenté a tela real que entrará no split screen após o drop.

<FlexLayoutSplitScreenDragBox
  containerName="customer-detail"
  navigationTitle="Customer"
  targetComponent={<CustomerDetail />}
>
  <button type="button">Customer Detail</button>
</FlexLayoutSplitScreenDragBox>

O navigationTitle do DragBox é o dado de rótulo da tela solta. O DragBox não mantém renderizadores de título como navigationTitleComponent, e o design real do título é determinado pelo navigationTitleComponent do FlexLayoutSplitScreen alvo.

Se você pressionar Escape durante o arrasto, cancela o arrasto atual. Limpa o clone e o estado de arrasto pendente, propagando isDragging false / isDrop false, fazendo com que as instruções de divisão do Split Screen desapareçam imediatamente e dropEndCallback ou divisão de tela não sejam executados.

Ao importar do ponto de entrada exclusivo do Next.js, você pode passar apenas a URL em vez de targetComponent. O iframe é false por padrão e, quando false, renderiza no servidor através do registry e Provider gerados.

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

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

<FlexLayoutSplitScreenDragBox
  url="https://example.com"
  iframe
  containerName="external"
  navigationTitle="External"
>
  <span>External</span>
</FlexLayoutSplitScreenDragBox>

dropDocumentOutsideOptionAo fornecer , você pode configurar uma ação para abrir uma nova janela/aba ao soltar fora do documento.

<FlexLayoutSplitScreenDragBox
  containerName="order"
  navigationTitle="Order"
  targetComponent={<OrderView />}
  dropDocumentOutsideOption={{
    openUrl: "/orders/1",
    widthRatio: 0.7,
    heightRatio: 0.8,
    isNewTap: false,
  }}
>
  <span>Order #1</span>
</FlexLayoutSplitScreenDragBox>