Tata Letak Header
mengontrol kontainer header dengan useFlexLayoutControl. Menyembunyikan header berdasarkan arah scroll, dan mempertahankan rasio tampilan saat rute berubah.
struktur root/head
untuk mengontrol header, header harus FlexLayoutContainerterdiri dari head kontainer di dalam layout root, dan sisa layar body dapat terdiri dari kontainer.
Mengontrol Header
dari komponen Header saat ini pathnamedan kondisi hide. Kembalikan contentRefyang terhubung ke pembungkus konten header yang sebenarnya.
menyembunyikan dengan scroll
enableScrollHideOnScrolluntuk trueJika diatur, saat menggulir ke bawah, kontainer header akan menyusut, dan saat menggulir ke atas atau kembali ke atas halaman, akan terbuka kembali.
tinggi, display, visibilitybukan cara untuk mengubah secara langsung. Ini mengubah flex-grow nilai dari kontainer target.FlexLayoutuntuk scrollMode="window"jika digunakan FlexLayoutDynamicHeightmembutuhkan konfigurasi untuk menyinkronkan tinggi document/body. Jika tidak, header tidak akan diubah ukurannya. Situs saat ini adalah FlexLayoutDynamicHeight komponen yang menstabilkan tinggi scroll, dan tindakan menyusutkan header adalah useFlexLayoutControlyang bertanggung jawab.sembunyikan/tampilkan berdasarkan kondisi route
jika perlu menyembunyikan atau menampilkan header secara eksplisit pada route tertentu, kirimkan kondisi tersebut hideContainersebagai parameter. Jika nilainya truemaka kontainer header akan menyusut, dan jika nilainya falsemaka kontainer header akan terbuka. Dalam kedua kasus, penyusutan/pembukaan otomatis berbasis scroll akan dinonaktifkan.
trueyang berarti sembunyikan secara paksa,falseyang berarti tampilkan secara paksa.null atauundefinedhanya saatenableScrollHideOnScroll berdasarkan pengaturan, penyusutan/pembukaan otomatis berbasis scroll akan berfungsi.Gunakan ukuran Header
jika ukuran tampilan header saat ini diperlukan, buat state yang sama containerSizeKeyNamemenggunakannya.
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 옵션입니다.
nilai kembali
contentRef
실제 content size를 측정할 wrapper에 연결하는 ref입니다.