Tata Letak Dasar

Aturan dasar paling mendasar dari FlexLayout + FlexLayoutContainer.

Struktur dasar

FlexLayoutadalah layout terpisah dengan satu arah (baris/kolom), dan anaknya FlexLayoutContainerterdiri dari. Jika merupakan Fragment, akan diratakan dan diproses ulang, tetapi sebaiknya unit panel yang sebenarnya selalu menggunakan kontainer dengan containerName.

tsx

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

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

Aturan 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 bersarang

Jika ingin menempatkan pembagian atas-bawah di dalam pembagian kiri-kanan di satu layar, masukkan kontainer lain di dalam FlexLayoutSetiap layout harus memiliki layoutNameyang berbeda untuk menghindari konflik penyimpanan.

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>