快速開始

FlexLayout 基本上負責單方向的分割畫面。

基本行分割

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>

備註

isResizePanel = true在這種情況下，resizePanel 將作為容器的兄弟渲染。例如，Mid 容器和 Right 之間的 resizePanel 擁有權在 Mid，但 mid-resizePanel 處理自己兩側的兄弟。

警告

在大多數使用案例中，最後一個元素不需要 isResizePanel附加。附加到最後一個元素時，可能會與網頁瀏覽器本身的調整功能重疊，從而影響用戶體驗。

當需要像下面這樣動態渲染時， isResizePanel建議使用狀態，而不是提前將其渲染為 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>

列分割 + 增長

在垂直分割中預先分配特定區域比例

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>

備註

如果不指定增長，則明確指定的增長值以外的其餘值將均勻分配給未指定增長的容器。
也就是說，在上面的代碼中，top 容器的增長 = 0.45，剩餘的 mid、right 容器的增長 = 1.275。

注意

建議通過 props 指定的增長值不應超過容器的數量。

多重交叉（嵌套）

兩個方向以上的分割是通過重疊 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>

備註

由於 FlexLayout 基於 CSS 的 flex，因此當方向設置為 column 時，如果基準父元素的高度未確定（例如 auto），則調整大小可能無法正常工作。
（在本文中，CodeBlock 隱含地擔任高度的角色。）
同樣，當沒有可調整大小的空間時，調整大小也不會起作用。

備註

FlexLayoutContainer 向其直系子代傳遞所需的樣式配置，以便 width: 100%、height: 100% 等調整大小能正常運作。
如果不希望受到其影響，建議先將 div 包裝為直系子代。
同樣的原因，如果您想防止意外的行為，建議不要創建兩個或更多的直系後代。

min/max + isFitContent

調整大小範圍限制 + 根據內容大小限制

在FlexLayoutContainer中使用CSS指定最小/最大大小，可以調整調整大小的範圍。

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

或者可以這樣使用。

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

執行結果如下。

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>

備註

在useEffect之後，左側容器不會小於25px，也不會大於180px。
如果想將內部內容的動態大小設置為最大大小 <FlexLayoutContainer isFitContent>...</FlexLayoutContainer>可以使用。使用isFitContent的容器不會比內部子元素的大小更大。

警告

在這個例子中，對Mid Container isFitContent進行設置時
由於可移動空間的值小於可移動的空間值，因此將形成完全無法調整大小的佈局。如果不是這樣的意圖，請不要對所有容器設置最大大小值。至少應有一個容器不設置最大大小。

面板移動模式 (panelMovementMode)

調整大小時與相鄰面板的互動方式

panelMovementMode是控制在調整大小面板時如何移動相鄰面板的屬性。默認值為 divorce，並且可以使用以下模式。

bulldozer

推開相鄰面板，但不會彼此黏附。

divorce (기본값)

推開相鄰面板並彼此黏附，但當返回到開始調整大小的位置時會再次分開。

stalker

相鄰面板完全黏附，但在到達最末端時會再次分開。

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>

最後檢查

layoutName / containerName

layoutName / containerName用於渲染的DOM元素的 id，同時也用於 getLayoutInfos, useDecompositionLayout 等Hook中的內部Store/Subject的 Key。

值必須在頁面內唯一。 唯一的如果重複，內部Key會衝突，導致調整大小/訂閱對象混合等意外行為。
值必須是 穩定。如果在每次渲染時更改或根據條件更改名稱，則現有狀態/訂閱將中斷，並可能被識別為“其他佈局”。
建議避免使用空白/特殊字符，並以英文字母/數字及 -, _ 為主的值。
isResizePanel 使用時會產生的識別碼${ContainerName} + '_resize_panel' 會額外生成。請保持容器命名的一致性和唯一性。

isResizePanel

容器的兄弟元素會渲染 resize panel。

例如：在 Mid 和 Right 之間，resize panel 的擁有權在 Mid，但 resize panel 會處理兩側的兄弟元素。

grow

明確指定特定容器的初始比例。

未指定 grow 的容器，將均勻分配除明確指定的 grow 以外的其餘部分。

isFitContent

限制容器不會比內部子元素的大小更大。

panelMovementMode

設置面板調整大小時與相鄰面板的交互方式。

"bulldozer"：推開相鄰面板但不會黏住

"divorce"：推開相鄰面板並黏住，但回彈時會分開（默認值）

"stalker"：相鄰面板完全黏住，但到達最邊緣時會分開