Bố cục tiêu đề
sử dụng useFlexLayoutControl để điều khiển container header. Gập header theo hướng cuộn và giữ tỷ lệ hiển thị hiện tại khi thay đổi route.
cấu trúc root/head
để điều khiển header, header phải được FlexLayoutContainercấu thành. Thông thường, bên trong layout root sẽ có head một container, và phần còn lại của màn hình sẽ được body cấu thành từ container.
Điều khiển Header
trong component Header, truyền hiện tại pathnamevà điều kiện ẩn. Kết quả trả về contentRefhãy kết nối với wrapper nội dung header thực tế.
gập lại bằng cuộn
enableScrollHideOnScrollđể trueKhi được thiết lập, khi cuộn xuống, container tiêu đề sẽ gập lại, và khi cuộn lên hoặc quay lại đầu trang, nó sẽ mở ra.
chiều cao, display, visibilitykhông phải là cách thay đổi trực tiếp. Thay vào đó, nó sẽ thay đổi giá trị của container mục tiêu. flex-grow giá trị.FlexLayoutđể scrollMode="window"nếu sử dụng FlexLayoutDynamicHeightcần cấu hình đồng bộ chiều cao document/body. Nếu không, tiêu đề sẽ không thay đổi kích thước. Trang hiện tại là FlexLayoutDynamicHeight thành phần ổn định chiều cao cuộn, và hành động gập tiêu đề là useFlexLayoutControlđảm nhiệm.ẩn/hiện theo điều kiện route
nếu cần ẩn hoặc hiển thị tiêu đề một cách rõ ràng trên một route cụ thể, hãy truyền điều kiện đó hideContainerđến. Nếu giá trị là truetiêu đề container sẽ gập lại, và nếu giá trị là falsetiêu đề container sẽ mở ra. Trong cả hai trường hợp, tự động gập/mở dựa trên cuộn sẽ bị vô hiệu hóa.
truelà ẩn cưỡng bức,falselà hiển thị cưỡng bức.null hoặcundefinedchỉ khienableScrollHideOnScroll theo cài đặt, tự động gập/mở dựa trên cuộn sẽ hoạt động.Sử dụng kích thước tiêu đề
nếu cần kích thước hiện tại của tiêu đề, hãy tạo trạng thái tương tự containerSizeKeyNameđể sử dụng.
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 옵션입니다.
giá trị trả về
contentRef
실제 content size를 측정할 wrapper에 연결하는 ref입니다.