Layout Básico

As regras básicas de configuração do FlexLayout + FlexLayoutContainer.

Estrutura básica

FlexLayouté um layout dividido com uma única direção (linha/coluna), e os filhos são FlexLayoutContainercompostos. Se for um Fragment, será achatado e reprocessado, mas é mais seguro sempre usar um contêiner com containerName.

tsx

<FlexLayout layoutName="workspace" direction="row">
  <FlexLayoutContainer containerName="workspace-left" isResizePanel>
    <LeftPanel />
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="workspace-main">
    <MainPanel />
  </FlexLayoutContainer>
</FlexLayout>

Regra de layoutName / containerName

layoutName

레이아웃 단위의 고유 이름입니다. resize memory, container ref store, split screen store가 이 이름을 기준으로 묶입니다.

containerName

각 패널의 고유 이름입니다. open/close, double click, size observe, drag/drop target 식별에 사용됩니다.

direction

row는 좌우 분할, column은 상하 분할입니다.

Layout aninhado

Se você quiser inserir uma divisão vertical dentro de uma divisão horizontal na mesma tela, insira outro FlexLayoutdentro do contêiner. Cada layout deve ter layoutNamenomes diferentes para evitar conflitos de armazenamento.

tsx

<FlexLayout layoutName="root" direction="row">
  <FlexLayoutContainer containerName="root-nav" isResizePanel>
    <Navigation />
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="root-content">
    <FlexLayout layoutName="content" direction="column">
      <FlexLayoutContainer containerName="content-editor" isResizePanel>
        <Editor />
      </FlexLayoutContainer>
      <FlexLayoutContainer containerName="content-console">
        <Console />
      </FlexLayoutContainer>
    </FlexLayout>
  </FlexLayoutContainer>
</FlexLayout>