Guias

Organiza a combinação do flex-layout de acordo com o fluxo de uso real.

Organizamos as regras básicas para direção row/column, layoutName/containerName e layouts aninhados.

Configuramos painéis redimensionáveis com isResizePanel, grow, panelMode e panelMovementMode.

Usamos containerOpenCloseSubjectMap e um hook de clique duplo para dobrar e desdobrar painéis.

Armazenamos e restauramos o valor de grow ajustado pelo usuário no storage com rememberResize.

Configuramos uma tela dividida dinâmica como no VS Code com FlexLayoutSplitScreen.

Renderiza page.tsx em um painel dividido no Next.js App Router e restaura o estado de divisão por URL/atualização.

Criamos itens de aba/cartão/menu arrastáveis com FlexLayoutSplitScreenDragBox.

Criamos uma UI fixa dentro das bordas do layout com stickyMode e FlexLayoutStickyBox.

Sincronizamos a altura do contêiner com a altura do viewport e do conteúdo usando FlexLayoutDynamicHeight.

Armazenamos/restauramos a posição de rolagem interna da tela dividida com FlexLayoutSplitScreenScrollBox.

Usamos useFlexLayoutControl para dobrar e restaurar o contêiner head do layout raiz de acordo com a rolagem.

Usamos hooks de paginação de lista para rolagem infinita/paginada baseados em sentinel.