Mulai Cepat

FlexLayout pada dasarnya menangani layar terpisah dalam satu arah.

Pemisahan Baris Dasar

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>

Catatan

isResizePanel = trueDalam hal ini, resizePanel dirender sebagai saudara dari kontainer. Misalnya, kepemilikan resizePanel yang berada di antara kontainer Tengah dan Kanan adalah milik Tengah, tetapi mid-resizePanel menangani saudara di kedua sisinya.

Peringatan

Dalam sebagian besar kasus penggunaan, tidak perlu menambahkan isResizePanelJika ditambahkan pada elemen terakhir, dapat mengganggu pengalaman pengguna dengan tumpang tindih fungsi perubahan ukuran dari browser web itu sendiri.

Ketika harus dirender secara dinamis seperti di bawah ini, isResizePaneldisarankan untuk menggunakan state daripada merender sebelumnya dengan 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>

Pemisahan Kolom + tumbuh

Memberikan rasio area tertentu sebelumnya dalam pemisahan vertikal

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>

Catatan

Jika tidak menentukan grow, nilai yang ditentukan secara eksplisit untuk grow akan dibagikan secara merata kepada kontainer yang tidak memiliki grow.
Dengan kata lain, dalam kode di atas, kontainer atas memiliki grow = 0.45, sedangkan kontainer tengah dan kanan memiliki grow = 1.275.

Perhatian

Disarankan agar nilai grow yang ditentukan melalui props tidak melebihi jumlah kontainer.

Multi Cross (Tumpang Tindih)

Pemisahan lebih dari dua arah dibuat dengan menumpuk 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>

Catatan

Karena FlexLayout didasarkan pada flex CSS, saat mengatur direction ke kolom, jika tinggi induk yang menjadi acuan tidak ditentukan (misalnya auto), perubahan ukuran mungkin tidak berfungsi.
(Dalam dokumen ini, CodeBlock secara implisit berfungsi sebagai tinggi.)
Demikian pula, jika tidak ada ruang kosong yang dapat diubah ukurannya, perubahan ukuran juga tidak akan berfungsi.

Catatan

FlexLayoutContainer menyampaikan konfigurasi gaya yang diperlukan agar perubahan ukuran seperti width: 100%, height: 100% berfungsi pada keturunan langsungnya.
Jika tidak ingin terpengaruh, disarankan untuk membungkus div sebagai keturunan langsung terlebih dahulu.
Selain itu, untuk mencegah perilaku yang tidak diinginkan, disarankan untuk tidak membuat lebih dari 2 keturunan langsung.

min/max + isFitContent

Batasan rentang ukuran ulang + batasan berdasarkan ukuran konten

Dengan menggunakan CSS pada FlexLayoutContainer, Anda dapat mengatur ukuran minimum/maksimum untuk mengontrol rentang ukuran ulang.

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])

Atau Anda dapat menggunakan ini.

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])

Hasil eksekusi adalah sebagai berikut.

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>

Catatan

Setelah useEffect, kontainer kiri tidak akan menyusut di bawah 25px dan tidak akan membesar di atas 180px.
Jika Anda ingin mengatur ukuran dinamis konten internal sebagai ukuran maksimum <FlexLayoutContainer isFitContent>...</FlexLayoutContainer>Anda dapat menggunakan. Kontainer yang menggunakan isFitContent tidak akan diubah ukurannya lebih besar dari ukuran elemen anak di dalamnya.

Peringatan

Dalam contoh ini, jika Anda memberikan isFitContentkepada Mid Container
karena nilai ruang yang dapat dipindahkan lebih kecil dari nilai ruang yang tersedia, layout menjadi tidak dapat diubah ukurannya sepenuhnya. Jika tidak dimaksudkan, jangan berikan nilai ukuran maksimum pada semua kontainer. Setidaknya satu kontainer harus tidak memiliki ukuran maksimum.

Mode pemindahan panel (panelMovementMode)

Cara interaksi panel yang berdekatan saat diubah ukurannya

panelMovementModeadalah properti yang mengontrol bagaimana panel bergerak saat diubah ukurannya. Nilai defaultnya adalah divorcedan Anda dapat menggunakan mode di bawah ini.

bulldozer

Mendorong panel yang berdekatan tetapi tidak saling menempel.

divorce (기본값)

Mendorong panel yang berdekatan dan saling menempel, tetapi akan terpisah kembali saat kembali ke posisi awal saat mengubah ukuran.

stalker

Panel yang berdekatan saling menempel sepenuhnya tetapi akan terpisah kembali saat mencapai ujung.

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>

Pemeriksaan Terakhir

layoutName / containerName

layoutName / containerNamedigunakan sebagai iddari elemen DOM yang dirender, dan juga getLayoutInfos, useDecompositionLayout digunakan dalam Hook seperti Kunci.

Nilai harus Unikdi dalam halaman. Jika ada duplikasi, kunci internal akan bertabrakan sehingga menyebabkan perilaku yang tidak diinginkan seperti campuran target ukuran ulang/langganan.
Nilai harus Stabildiubah. Jika berubah setiap render atau bergantung pada kondisi, status/langganan yang ada dapat terputus dan diakui sebagai "layout lain".
Hindari karakter kosong/spesial, disarankan untuk menggunakan nilai berbasis huruf Inggris/angka dan -, _.
isResizePanel Identifikasi turunan saat digunakan${ContainerName} + '_resize_panel' akan dibuat tambahan. Pertahankan penamaan kontainer yang konsisten dan unik.

isResizePanel

Panel resize akan dirender sebagai saudara dari kontainer.

Contoh: Di antara Mid dan Right, kepemilikan panel resize ada di Mid, tetapi panel resize menangani saudara di kedua sisi.

grow

"Tentukan" rasio awal dari kontainer tertentu.

Kontainer yang tidak ditentukan grow akan mendapatkan distribusi yang merata dari sisanya kecuali yang ditentukan.

isFitContent

Batasi agar kontainer tidak di-resize lebih besar dari ukuran elemen anak di dalamnya.

panelMovementMode

Atur cara interaksi saat panel di-resize dengan panel yang berdekatan.

"bulldozer": Mendorong panel yang berdekatan tetapi tidak menempel.

"divorce": Mendorong panel yang berdekatan dan menempel tetapi terpisah saat kembali (default).

"stalker": Panel yang berdekatan sepenuhnya menempel tetapi terpisah saat mencapai ujung.