Mise en page de l'en-tête

Contrôle le conteneur d'en-tête avec useFlexLayoutControl. Plie l'en-tête selon la direction du défilement et maintient le ratio d'affichage actuel lors du changement de route.

structure root/head

Pour contrôler l'en-tête, celui-ci doit être FlexLayoutContainercomposé de. tête Généralement, un conteneur est placé dans la mise en page racine, et le reste de l'écran est corps composé d'un conteneur.

tsx

<FlexLayout layoutName="root" direction="column">
  <FlexLayoutContainer containerName="head">
    <Header />
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="body">
    {children}
  </FlexLayoutContainer>
</FlexLayout>

Contrôler l'en-tête

Transmet les conditions actuelles et de masquage depuis le composant d'en-tête. pathnameLe retour doit être connecté au wrapper de contenu de l'en-tête réel. contentRefConnectez-vous au wrapper de contenu d'en-tête réel.

tsx

"use client";

import { useFlexLayoutControl } from "@byeolnaerim/flex-layout";
import { usePathname } from "next/navigation";

export default function HeaderShell() {
  const pathname = usePathname();

  const hideHeaderByRoute =
    pathname.startsWith("/editor") || pathname.startsWith("/viewer");

  const { contentRef } = useFlexLayoutControl({
    layoutName: "root",
    containerName: "head",
    pathname,
    hideContainer: hideHeaderByRoute ? true : null,
    enableScrollHideOnScroll: true,
    containerSizeKeyName: "__root_headSize",
  });

  return (
    <header ref={contentRef}>
      <GlobalNavigation />
    </header>
  );
}

plier avec défilement

enableScrollHideOnScrollà vraiLorsque cela est activé, le conteneur d'en-tête se replie lorsque vous faites défiler vers le bas et se déplie lorsque vous faites défiler vers le haut ou que vous revenez en haut de la page.

ne modifie pas la hauteur directement

L'action est hauteur, affichage, visibilitéCe n'est pas une méthode de changement direct. Cela modifie la valeur du conteneur cible. flex-grow valeur.

mise en page de défilement de la fenêtre

enfants directs du corpsFlexLayoutà scrollMode="window"Si utilisé comme FlexLayoutDynamicHeightune configuration est nécessaire pour synchroniser la hauteur du document/corps. Sinon, l'en-tête ne sera pas redimensionné. Le site actuel est FlexLayoutDynamicHeight Le composant stabilise la hauteur de défilement, et l'action de repli de l'en-tête est useFlexLayoutControlresponsable de cela.

cacher/afficher selon la condition de route

Si vous devez cacher ou afficher explicitement l'en-tête sur une route spécifique, transmettez cette condition hideContainercomme valeur. Si la valeur est vrail'en-tête se replie, et si la valeur est fauxl'en-tête se déplie. Dans les deux cas, le repli/dépli automatique basé sur le défilement est désactivé.

tsx

const pathname = usePathname();

const shouldForceHideHeader =
  pathname.startsWith("/editor") || pathname.startsWith("/viewer");

const { contentRef } = useFlexLayoutControl({
  layoutName: "root",
  containerName: "head",
  pathname,
  hideContainer: shouldForceHideHeader ? true : null,
  enableScrollHideOnScroll: true,
  containerSizeKeyName: "__root_headSize",
});

hideContainer est une valeur tri-état

vraiqui est un masquage forcé,fauxqui est un affichage forcé.nul ouindéfiniuniquement lorsqueenableScrollHideOnScroll le repli/dépli automatique basé sur le défilement fonctionne selon les paramètres.

Utiliser la taille de l'en-tête

Si vous avez besoin de la taille actuelle d'affichage de l'en-tête, créez un état avec le même containerSizeKeyNamenom.

tsx

import { createContainerSizeState } from "@byeolnaerim/flex-layout";

const [, , useHeaderSize] = createContainerSizeState({
  containerSizeKeyName: "__root_headSize",
});

function ContentLayout() {
  const headerSize = useHeaderSize();

  return (
    <main style={{ paddingTop: headerSize }}>
      Content
    </main>
  );
}

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

valeur de retour

contentRef

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