Layout do Cabeçalho
controla o container do header com useFlexLayoutControl. Dobra o header de acordo com a direção do scroll e mantém a proporção atual durante a mudança de rota.
estrutura root/head
para controlar o header, ele deve ser FlexLayoutContainercomposto por. cabeça normalmente, um container é colocado dentro do layout root, e o restante da tela é corpo composto por um container.
Controlar o Header
passa as condições atuais de caminhoexibição e ocultação. O retorno contentRefdeve ser conectado ao wrapper de conteúdo real do header.
dobrar com scroll
habilitarScrollEsconderAoRolarpara verdadeiroQuando ativado, o contêiner do cabeçalho se recolhe ao rolar para baixo e se expande novamente ao rolar para cima ou voltar ao topo da página.
altura, exibir, visibilidadenão é uma mudança direta. O valor do contêiner alvo é flex-grow alterado.FlexLayoutpara modoDeRolagem="janelas"se usado como FlexLayoutDynamicHeighté necessário configurar a sincronização da altura do documento/body. Caso contrário, o cabeçalho não será redimensionado. O site atual é FlexLayoutDynamicHeight O componente estabiliza a altura de rolagem e a ação de recolher o cabeçalho é usarControleLayoutFlexresponsável por isso.esconder/exibir com base na rota
Se você precisar esconder ou exibir o cabeçalho explicitamente em uma rota específica, passe essa condição esconderContêinercomo parâmetro. Se o valor for verdadeiroo contêiner do cabeçalho será recolhido, e se o valor for falsoo contêiner do cabeçalho será expandido. Em ambos os casos, a recolha/expansão automática baseada em rolagem será desativada.
verdadeiroforça o esconder,falsoforça a exibição.nulo ouindefinidosomente quandohabilitarScrollEsconderAoRolar a configuração permite que a recolha/expansão automática baseada em rolagem funcione.Usar tamanho do cabeçalho
Se precisar do tamanho atual de exibição do cabeçalho, use o mesmo nomeDaChaveTamanhoContêinerpara criar e usar o estado.
parâmetros
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입니다.