我的文档库

多根目录侧边栏

flex-layout

  • Getting Started

  • Guides

  • Reference

typed-rx-http

  • Getting Started

  • Guides

  • Reference

global-rx-state

  • Getting Started

  • Guides

  • Reference

webflux-fe-dev-assistant

reactive-mongo-dsl

头部布局

通过 useFlexLayoutControl 控制头部容器。根据滚动方向折叠头部,并在路由更改时保持当前曝光比例。


root/head 结构

要控制头部,头部必须 FlexLayoutContainer 容器组成。 容器组成,通常在 root 布局中放置一个 body 容器,剩余的屏幕由

tsx
控制头部

在头部组件中传递当前 路径名和隐藏条件。返回的 contentRef应连接到实际的头部内容包装器。

tsx
通过滚动折叠

enableScrollHideOnScroll true设置后,当向下滚动时,头部容器会折叠,向上滚动或返回页面顶部时会重新展开。

根据路由条件隐藏/显示

如果需要在特定路由中显式隐藏或显示头部,请将该条件 hideContainer传递。值为 true时,折叠头部容器,值为 false时,展开头部容器。在这两种情况下,基于滚动的自动折叠/展开将被禁用。

tsx
使用头部大小

如果需要头部当前显示的大小,请使用相同的 containerSizeKeyName生成状态。

tsx
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 옵션입니다.

返回值

contentRef

실제 content size를 측정할 wrapper에 연결하는 ref입니다.

© 2026 Byeolnaerim. 保留所有权利.介绍隐私政策