クイックスタート

FlexLayoutは基本的に一方向の分割画面を担当します。

基本的なRow分割

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でレンダリングするよりも、stateを使用することをお勧めします。

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>

カラム分割 + grow

縦分割で特定の領域比率を事前に付与

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>

ノート

もしgrowを指定しない場合、明示的に指定されたgrowの値を除く残りの値がgrowが指定されていないコンテナに均等分配されます。
つまり、上記のコードではtopコンテナはgrow = 0.45、残りのmid、rightコンテナはgrow = 1.275が割り当てられます。

注意

できるだけpropsで指定するgrowの値はコンテナの数を超えないことをお勧めします。

マルチクロス（ネスト）

二方向以上の分割は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に基づいているため、directionをcolumnに設定する場合、基準となる親の高さが決まらないと（例：auto）リサイズが動作しないことがあります。
（この文書では暗黙的にheightとしての役割をCodeBlockが果たしています。）
同様に、リサイズ可能な余白がない場合もリサイズは動作しません。

ノート

FlexLayoutContainerは自分の直系の子にwidth: 100%、height: 100%などのリサイズが動作するために必要なスタイル構成を伝えます。
その影響を受けたくない場合は、直系の子としてdivを先にラップすることをお勧めします。
また同じ理由で、意図しない動作を防ぎたい場合は、直系の子孫を2つ以上作成しないことをお勧めします。

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を付与した場合
動かせる余白の値よりも移動可能な空間の値が小さいため、完全にリサイズ不可能なレイアウトになります。意図しない場合は、すべてのコンテナにmax sizeの値を付与しないでください。少なくとも1つ以上のコンテナにはmax sizeが付与されていない必要があります。

パネル移動モード (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として使用されます。

値はページ内で Uniqueでなければなりません。重複すると内部Keyが衝突し、リサイズ/購読対象が混ざるなど意図しない動作が発生する可能性があります。
値は 安定でなければなりません。レンダリングごとに変わったり、条件によって名前が変わると、既存の状態/購読が切れ、「別のレイアウト」として認識される可能性があります。
空白や特殊文字は避け、英数字と -, _ を中心とした値を推奨します。
isResizePanel 使用時に派生識別子${ContainerName} + '_resize_panel' が追加で作成されます。コンテナの命名を一貫してユニークに保ってください。

isResizePanel

コンテナの兄弟としてリサイズパネルがレンダリングされます。

例: MidとRightの間で、リサイズパネルの所有権はMidにありますが、リサイズパネルは両側の兄弟を扱います。

grow

特定のコンテナの初期比率を「明示」します。

grow未指定のコンテナは、明示されたgrowを除く残りを均等に分配されます。

isFitContent

コンテナが内部の子要素のサイズより大きくリサイズされないように制限します。

panelMovementMode

パネルリサイズ時の隣接パネルとの相互作用の方法を設定します。

"bulldozer"隣接パネルを押し出しますが、くっつきません。

"divorce"隣接パネルを押し出し、くっつきますが、戻ると分離します（デフォルト）。

"stalker"隣接パネル同士が完全にくっつきますが、最終地点に達したときは分離します。