リサイズメモリ

ユーザーが調整したgrowマップをストレージに保存し、次のレンダリングで復元します。

rememberResize

rememberResizeは FlexLayout レベルオプションです。grow値はレイアウト全体のコンテナ間で分配されるため ストアではlayout nameをキーとして使用します。

tsx

<FlexLayout
  layoutName="workspace"
  direction="row"
  rememberResize={{
    storage: "localStorage",
    keyName: "workspace-grow-map",
  }}
>
  <FlexLayoutContainer containerName="workspace-left" isResizePanel>
    <div>Left</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="workspace-main">
    <div>Main</div>
  </FlexLayoutContainer>
</FlexLayout>

基本キー

デフォルトキー名

キー名を省略すると __flexLayoutResizeGrow:${layoutName} 形式のキーが使用されます。

いつ保存されるか

コンテナ内部では実際のユーザーのリサイズ中にstyle.flexの変化を観察し、現在のレイアウトのcontainerNameごとのgrowマップを保存します。保存された値はマウント後 準備完了が解決されると各コンテナに再適用されます。

確認方法

パネルのサイズを調整した後、ページをリフレッシュしてください。保存されたgrowマップがlocalStorageから再読み込みされ、同じ比率で復元されます。