Header Layout
useFlexLayoutControl로 header container를 제어합니다. scroll 방향에 따라 header를 접고, route 변경 시 현재 노출 비율을 유지합니다.
root/head 구조
header를 제어하려면 header가 FlexLayoutContainer로 구성되어 있어야 합니다. 보통 root layout 안에 head container를 두고, 나머지 화면을 body container로 구성합니다.
Header를 제어
Header 컴포넌트에서 현재 pathname과 hide 조건을 전달합니다. 반환되는 contentRef는 실제 header content wrapper에 연결하십시오.
scroll로 접기
enableScrollHideOnScroll을 true로 설정하면 아래로 스크롤할 때 header container가 접히고, 위로 스크롤하거나 page top으로 돌아오면 다시 펼쳐집니다.
height, display, visibility를 직접 바꾸는 방식이 아닙니다. 대상 container의 flex-grow 값을 변경합니다.FlexLayout을 scrollMode="window"로 사용한다면 FlexLayoutDynamicHeight로 document/body 높이를 함께 동기화하는 구성이 필요합니다. 그렇지 않다면 헤더는 리사이징 되지 않습니다. 현재 사이트는 FlexLayoutDynamicHeight 컴포넌트가 scroll height 안정화하고, header를 접는 동작은 useFlexLayoutControl이 담당하고 있습니다.route 조건으로 숨기기/표시하기
특정 route에서 header를 명시적으로 숨기거나 표시해야 한다면 해당 조건을 hideContainer로 전달합니다. 값이 true이면 header container를 접고, 값이 false이면 header container를 펼칩니다. 두 경우 모두 scroll 기반 자동 접기/펼치기는 비활성화됩니다.
true는 강제 숨김,false는 강제 표시입니다.null 또는undefined일 때만enableScrollHideOnScroll 설정에 따라 scroll 기반 자동 접기/펼치기가 동작합니다.Header size 사용
header의 현재 노출 size가 필요하면 같은 containerSizeKeyName으로 state를 생성해 사용합니다.
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입니다.