Início Rápido

FlexLayout é responsável basicamente por uma tela dividida em uma direção.

Divisão de Linha Básica

tsx

<FlexLayout layoutName="basic-row_1" direction="row">
  <FlexLayoutContainer containerName="basic-row_1-left" isResizePanel>
    <div>Left</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="basic-row_1-mid" isResizePanel>
    <div>Mid</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="basic-row_1-right">
    <div>Right</div>
  </FlexLayoutContainer>
</FlexLayout>

Notas

isResizePanel = trueNeste caso, o resizePanel será renderizado como um irmão do contêiner. Por exemplo, a propriedade do resizePanel entre o contêiner Mid e Right pertence ao Mid, mas o mid-resizePanel gerencia seus irmãos ao lado.

Aviso

Na maioria dos casos de uso, não é necessário adicionar isResizePanelao último elemento. Se adicionado ao último elemento, pode interferir na funcionalidade de redimensionamento do próprio navegador, prejudicando a experiência do usuário.

Quando precisar renderizar dinamicamente como abaixo, isResizePanelé recomendável usar o estado em vez de renderizar previamente como true.

tsx

<FlexLayout layoutName="basic-row_2" direction="row">
  <FlexLayoutContainer containerName="basic-row_2-mid" isResizePanel>
    <div>
      <div>Mid</div>
      <button onClick={() => startTransition(() => setIsTwoRight(prev => !prev))}>ToggleIsTwoRight</button>
    </div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="basic-row_2-right" isResizePanel={isTwoRight}>
    <div>Right</div>
  </FlexLayoutContainer>

  {isTwoRight ? 
    <FlexLayoutContainer containerName="basic-row_2-right2">
      <div>Right To Right</div>
    </FlexLayoutContainer> : <></>
  }
</FlexLayout>

Divisão de Coluna + crescimento

Atribuir previamente uma proporção específica a uma área em uma divisão vertical

tsx


  <FlexLayout layoutName="basic-column_3" direction="column">
    <FlexLayoutContainer containerName="basic-column_3-top" isResizePanel grow={0.45}>
      <div>Left</div>
    </FlexLayoutContainer>
    <FlexLayoutContainer containerName="basic-column_3-mid">
      <div>Mid</div>
    </FlexLayoutContainer>

    <FlexLayoutContainer containerName="basic-column_3-right">
      <div>Right</div>
    </FlexLayoutContainer>
  </FlexLayout>

Notas

Se o crescimento não for especificado, os valores restantes, exceto o valor de crescimento explicitamente definido, serão distribuídos igualmente entre os contêineres que não têm crescimento especificado.
Ou seja, no código acima, o contêiner superior terá grow = 0.45, enquanto os contêineres mid e right terão grow = 1.275.

Atenção

É recomendável que o valor de crescimento especificado por props não exceda o número de contêineres.

Multi Cross (aninhado)

Divisões em mais de uma direção são criadas sobrepondo FlexLayout

tsx


  <FlexLayout layoutName="basic-row_4" direction="row">
    <FlexLayoutContainer containerName="basic-row_4-left" isResizePanel>
      <div>
        <FlexLayout layoutName="basic-row_4-basic-column-left" direction="column">
          <FlexLayoutContainer containerName="basic-row_4-left-top" isResizePanel>
            <div>left-top</div>
          </FlexLayoutContainer>
          <FlexLayoutContainer containerName="basic-row_4-left-bottom">
            <div>left-bottom</div>
          </FlexLayoutContainer>
        </FlexLayout>
      </div>
    </FlexLayoutContainer>

    <FlexLayoutContainer containerName="basic-row_4-right">
      <div >
        <FlexLayout layoutName="basic-row_4-basic-column-right" direction="column">
          <FlexLayoutContainer containerName="basic-row_4-right-top" isResizePanel>
            <div>right-top</div>
          </FlexLayoutContainer>
          <FlexLayoutContainer containerName="basic-row_4-right-bottom">
            <div>right-bottom</div>
          </FlexLayoutContainer>
        </FlexLayout>
      </div>
    </FlexLayoutContainer>
  </FlexLayout>

Notas

Como o FlexLayout é baseado no flex do css, quando a direção é definida como coluna, se a altura do pai de referência não for determinada (ex: auto), o redimensionamento pode não funcionar.
(Neste documento, o CodeBlock desempenha implicitamente o papel de altura.)
Da mesma forma, se não houver espaço livre redimensionável, o redimensionamento também não funcionará.

Notas

FlexLayoutContainer transmite a configuração de estilo necessária para que o redimensionamento funcione, como width: 100%, height: 100%, para seus descendentes diretos.
Se não quiser que algo entre em sua área de influência, é recomendável envolver primeiro com um div como descendente direto.
Além disso, por esse mesmo motivo, recomenda-se não criar mais de dois descendentes diretos se você quiser evitar comportamentos indesejados.

min/max + isFitContent

Limite de intervalo de redimensionamento + limite baseado no tamanho do conteúdo

Ao especificar tamanhos mínimos/máximos no FlexLayoutContainer usando CSS, você pode controlar o intervalo de redimensionamento.

tsx

const [handleSizeTarget, setHandleSizeTarget] = useState<HTMLElement|null>(null);

useEffect(()=>{
  const layoutSubscribe = getLayoutInfos('basic-row_7').subscribe((layout)=>{
    const leftContainer = layout.container?.['basic-row_7-left']?.current;
    if(leftContainer){
      setHandleSizeTarget(leftContainer);
    }
  });
  return ()=>{
    layoutSubscribe.unsubscribe();
  }
},[])

useEffect(()=>{
  if(!handleSizeTarget) return;
  handleSizeTarget.style.minWidth = '25px';
  handleSizeTarget.style.maxWidth = '180px';
},[handleSizeTarget])

Ou você pode usar assim.

tsx

const { layout: containers, container, resizePanel } = useDecompositionLayout({
  layoutName: 'basic-row_7',
  containerName: 'basic-row_7-left',
});

useEffect(()=>{
  if(!container) return;
  container.style.minWidth = '25px';
  container.style.maxWidth = '180px';
},[container])

O resultado da execução é o seguinte.

tsx

<FlexLayout layoutName="basic-row_7" direction="row">
  <FlexLayoutContainer containerName="basic-row_7-left" isResizePanel>
    <div>Left</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="basic-row_7-mid" isResizePanel>
    <div>Mid</div>
  </FlexLayoutContainer>
  <FlexLayoutContainer
    containerName="basic-row_7-right"
    isFitContent
  >
    <div
      style={{
        whiteSpace: "nowrap",
        textWrapMode: "nowrap",
        paddingRight:'1rem'
      }}
    >
      I'm Using Fit Content{" "}
    </div>
  </FlexLayoutContainer>
</FlexLayout>

Notas

Após o useEffect, o contêiner esquerdo não diminuirá abaixo de 25px e não aumentará acima de 180px.
Se você quiser definir o tamanho dinâmico do conteúdo interno como tamanho máximo <FlexLayoutContainer isFitContent>...</FlexLayoutContainer>pode ser usado. Um contêiner que usa isFitContent não será redimensionado para um tamanho maior do que o tamanho dos elementos filhos internos.

Aviso

Neste exemplo, se você atribuir a Mid Container isFitContento valor
o valor do espaço que pode ser movido é menor do que o valor do espaço disponível, resultando em um layout que não pode ser redimensionado completamente. Se não for essa a intenção, não atribua valores de tamanho máximo a todos os contêineres. Pelo menos um ou mais contêineres não devem ter tamanho máximo.

Modo de movimento do painel (panelMovementMode)

Como os painéis interagem ao redimensionar

panelMovementModeé uma propriedade que controla como os painéis adjacentes se movem ao redimensionar o painel. O valor padrão é divorcee os modos abaixo podem ser usados.

bulldozer

Empurra os painéis adjacentes, mas eles não ficam grudados.

divorce (기본값)

Empurra os painéis adjacentes e eles ficam grudados, mas se voltarem para a posição de onde o redimensionamento começou, eles se separam novamente.

stalker

Os painéis adjacentes ficam completamente grudados, mas se separam novamente quando atingem o final.

tsx

const [mode, setMode] = useState<"bulldozer" | "divorce" | "stalker">("bulldozer");

<ButtonGroup variant="outlined" size="small">
  {["bulldozer", "divorce", "stalker"].map((m) => (
    <Button
      key={m}
      onClick={() => setMode(m)}
      variant={mode === m ? "contained" : "outlined"}
    >
      {m}
    </Button>
  ))}
</ButtonGroup>

<Box
  sx={{
    height: "100%",
    "& [data-container_name]": {
      minHeight: "2rem",
    },
  }}
>
  <FlexLayout
    layoutName={`panel-movement-demo-${mode}`}
    direction="column"
    panelMovementMode={mode}
  >
    <FlexLayoutContainer containerName="panel-top" isResizePanel>
      <div>Top</div>
    </FlexLayoutContainer>
    <FlexLayoutContainer containerName="panel-mid1" isResizePanel>
      <div>Mid 1</div>
    </FlexLayoutContainer>
    <FlexLayoutContainer containerName="panel-mid2" isResizePanel>
      <div>Mid 2</div>
    </FlexLayoutContainer>
    <FlexLayoutContainer containerName="panel-bottom">
      <div>Bottom</div>
    </FlexLayoutContainer>
  </FlexLayout>
</Box>

Última verificação

layoutName / containerName

layoutName / containerNameé usado como iddo elemento DOM renderizado, e também getLayoutInfos, useDecompositionLayout é usado em Hooks como o Store/Subject interno. Chaveé usado.

O valor deve ser único dentro da página. ÚnicoSe houver duplicatas, as chaves internas podem entrar em conflito, resultando em comportamentos indesejados, como mistura de alvos de redimensionamento/assinatura.
O valor deve ser EstávelSe mudar a cada renderização ou se o nome mudar com base em condições, o estado/assinatura existente pode ser interrompido e pode ser reconhecido como "outro layout".
Evite espaços/caracteres especiais e prefira valores com letras/números e -, _.
isResizePanel Identificador derivado ao usar${ContainerName} + '_resize_panel' será criado. Mantenha a nomenclatura do contêiner consistente e única.

isResizePanel

O painel de redimensionamento será renderizado como um irmão do contêiner.

Ex: Entre Mid e Right, a propriedade do painel de redimensionamento é de Mid, mas o painel de redimensionamento manipula os irmãos ao lado.

grow

"Especifica" a proporção inicial de um contêiner específico.

Contêineres sem grow receberão uma distribuição uniforme, exceto o grow especificado.

isFitContent

Limita o contêiner para não ser redimensionado maior que o tamanho dos elementos filhos internos.

panelMovementMode

Define como o painel interage com os painéis adjacentes ao redimensionar.

"bulldozer": empurra os painéis adjacentes, mas não gruda.

"divorce": empurra os painéis adjacentes e gruda, mas se separar, volta (padrão).

"stalker": os painéis adjacentes grudam completamente, mas se separam ao atingir o final.