Diseño de Encabezado
Controla el contenedor del encabezado con useFlexLayoutControl. Colapsa el encabezado según la dirección de desplazamiento y mantiene la proporción de exposición actual al cambiar de ruta.
estructura root/head
Para controlar el encabezado, debe estar compuesto por el encabezado. FlexLayoutContainerNormalmente, se coloca un contenedor dentro del diseño raíz, cabeza y el resto de la pantalla se compone de un contenedor. cuerpo contenedor
Controlar el encabezado
Pasa las condiciones actuales y de ocultar desde el componente Header. rutaEl retorno debe conectarse al envoltorio del contenido real del encabezado. referenciaDeContenidose
colapsar con scroll
enableScrollHideOnScrolla trueSi se configura, el contenedor del encabezado se pliega al desplazarse hacia abajo y se despliega nuevamente al desplazarse hacia arriba o volver a la parte superior de la página.
altura, display, visibilityno se basa en cambiar directamente el valor del contenedor objetivo. flex-grow cambia el valor.FlexLayouta scrollMode="window"si se utiliza como FlexLayoutDynamicHeightse necesita una configuración que sincronice la altura del documento/body. De lo contrario, el encabezado no se redimensionará. El sitio actual es FlexLayoutDynamicHeight el componente estabiliza la altura de desplazamiento y la acción de plegar el encabezado es useFlexLayoutControlresponsable de esto.ocultar/mostrar según la ruta
si se necesita ocultar o mostrar el encabezado explícitamente en una ruta específica, se debe pasar esa condición hideContainercomo argumento. Si el valor es truese pliega el contenedor del encabezado, y si el valor es falsese despliega el contenedor del encabezado. En ambos casos, la plegadura/despliegue automática basada en el desplazamiento se desactiva.
truees ocultar forzado,falsees mostrar forzado.null oundefinedsolo cuandoenableScrollHideOnScroll según la configuración, la plegadura/despliegue automática basada en el desplazamiento funcionará.Usar tamaño de encabezado
si se necesita el tamaño actual de exposición del encabezado, se utiliza el mismo containerSizeKeyNamepara crear y usar el estado.
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 옵션입니다.
valor de retorno
contentRef
실제 content size를 측정할 wrapper에 연결하는 ref입니다.