標題佈局

使用 useFlexLayoutControl 控制標頭容器。根據滾動方向折疊標頭，並在路由變更時保持當前顯示比例。

root/head 結構

要控制標頭，標頭必須 彈性佈局容器由以下組成。通常在 root layout 中放置 head 容器，其餘畫面由 主體 容器組成。

tsx

控制標頭

在標頭組件中傳遞當前 路徑名及隱藏條件。返回的 contentRef應連接到實際的標頭內容包裝器。

tsx

通過滾動折疊

enableScrollHideOnScroll。 true設置後，當向下滾動時，標頭容器會折疊，當向上滾動或返回頁面頂部時，會再次展開。

不直接操作高度

動作是 高度, display, visibility不是直接改變。目標容器的 flex-grow 值會被更改。

window scroll layout

body的直系子孫FlexLayoutContainer。 scrollMode="window"如果使用 FlexLayoutDynamicHeight則需要與document/body高度同步的配置。否則，標頭不會重新調整大小。目前的網站是 FlexLayoutDynamicHeight 組件穩定scroll height，折疊標頭的動作是 useFlexLayoutControl由此負責。

根據路由條件隱藏/顯示

如果需要在特定路由中明確隱藏或顯示標頭，則將該條件 hideContainer傳遞。值為 true時，折疊標頭容器，值為 false時，展開標頭容器。在這兩種情況下，基於滾動的自動折疊/展開將被禁用。

tsx

hideContainer是三狀態值

true強制隱藏，false強制顯示。null 或undefined僅在enableScrollHideOnScroll 根據設置，基於滾動的自動折疊/展開會運作。

使用Header size

如果需要標頭的當前顯示大小，則使用相同的 containerSizeKeyName來生成狀態。

tsx

params

layoutName

제어할 container가 들어 있는 decomposition layout 이름입니다. header 예시에서는 root를 사용합니다.

containerName

flex-grow로 제어할 decomposition container 이름입니다. header 예시에서는 head를 사용합니다.

pathname

route 변경을 감지하고 현재 main-axis 노출 비율을 새 route에 동기화하는 데 사용합니다.

hideContainer

대상 container의 표시 상태를 명시적으로 제어하는 tri-state 값입니다. true이면 강제 숨김, false이면 강제 표시, null/undefined이면 명시적 제어 없이 enableScrollHideOnScroll 설정을 따릅니다.

enableScrollHideOnScroll

hideContainer가 null/undefined일 때 scroll 방향에 따라 대상 container를 자동으로 접거나 복원할지 여부입니다. hideContainer가 true 또는 false이면 이 설정은 적용되지 않습니다.

containerSizeKeyName

측정된 container main-axis size를 저장할 global-rx-state key입니다.

containerSizeStorageOptions

container size state에 적용할 global-rx-state storage 옵션입니다.

return value

contentRef

실제 content size를 측정할 wrapper에 연결하는 ref입니다.