Basic Layout

FlexLayout + FlexLayoutContainer의 가장 기본적인 구성 규칙입니다.

기본 구조

FlexLayout은 하나의 방향(row/column)을 가진 분할 레이아웃이고, 자식은 FlexLayoutContainer로 구성합니다. Fragment인 경우 평탄화하여 재처리하지만, 가급적 실제 패널 단위는 항상 containerName을 가진 컨테이너로 잡는 것이 안전합니다.

tsx

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

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

layoutName / containerName 규칙

layoutName

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

containerName

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

direction

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

중첩 레이아웃

한 화면에서 좌우 분할 안에 상하 분할을 다시 넣고 싶다면 컨테이너 내부에 다른 FlexLayout을 넣습니다. 각 레이아웃의 layoutName은 서로 달라야 store 충돌을 피할 수 있습니다.

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>