ヘッダーレイアウト
useFlexLayoutControlでヘッダーコンテナを制御します。スクロール方向に応じてヘッダーを折りたたみ、ルート変更時に現在の表示比率を維持します。
root/head構造
ヘッダーを制御するには、ヘッダーが FlexLayoutContainerで構成されている必要があります。通常、ルートレイアウトの中に ヘッド コンテナを置き、残りの画面を ボディ コンテナで構成します。
ヘッダーを制御
ヘッダーコンポーネントから現在の パス名と非表示条件を渡します。返される contentRefは実際のヘッダーコンテンツラッパーに接続してください。
スクロールで折りたたむ
enableScrollHideOnScrollを true設定すると、下にスクロールする際にヘッダーコンテナが折りたたまれ、上にスクロールするかページのトップに戻ると再び展開されます。
高さ, display, visibilityを直接変更する方法ではありません。対象コンテナの flex-grow 値を変更します。FlexLayoutを scrollMode="window"を使用する場合は FlexLayoutDynamicHeightdocument/bodyの高さを同期させる構成が必要です。そうでなければ、ヘッダーはリサイズされません。現在のサイトは FlexLayoutDynamicHeight コンポーネントがスクロール高さを安定化させ、ヘッダーを折りたたむ動作は useFlexLayoutControlが担当しています。ルート条件で隠す/表示する
特定のルートでヘッダーを明示的に隠したり表示したりする必要がある場合、その条件を hideContainerに渡します。値が trueの場合、ヘッダーコンテナを折りたたみ、値が falseの場合、ヘッダーコンテナを展開します。どちらの場合もスクロールベースの自動折りたたみ/展開は無効になります。
trueは強制的に隠す、falseは強制的に表示します。null またはundefinedの時だけenableScrollHideOnScroll 設定に応じてスクロールベースの自動折りたたみ/展開が動作します。ヘッダーサイズを使用
ヘッダーの現在の表示サイズが必要な場合、同じ containerSizeKeyNameで状態を生成して使用します。
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입니다.