Resize Memory

사용자가 조절한 grow map을 storage에 저장하고 다음 렌더에서 복원합니다.

rememberResize

rememberResize는 FlexLayout 레벨 옵션입니다. grow 값은 레이아웃 전체 컨테이너 사이에서 분배되므로 store에서는 layout name을 key로 사용합니다.

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>

기본 key

Default keyName

keyName을 생략하면 __flexLayoutResizeGrow:${layoutName} 형식의 key가 사용됩니다.

언제 저장되는가

컨테이너 내부에서는 실제 사용자 resize 중일 때 style.flex 변화를 관찰해 현재 레이아웃의 containerName별 grow map을 저장합니다. 저장된 값은 mount 후 ready가 resolve되면 각 컨테이너에 다시 적용됩니다.

확인 방법

패널 크기를 조절한 뒤 페이지를 새로고침하십시오. 저장된 grow map이 localStorage에서 다시 읽혀 같은 비율로 복원됩니다.