Altura Dinâmica

Sincroniza a altura do target com a altura do viewport e do conteúdo em layouts baseados em rolagem de janela.

Função

FlexLayoutDynamicHeightfoi projetado para conteúdo dinâmico sem altura especificada. O alturado elemento alvo e altura mínimasynchronize com a altura real do conteúdo e a altura mínima do viewport, do browser janela ajuda a calcular de forma estável a altura do scroll.

sincronização da altura do corpo

neste caso, targetRefse não for passado, o elemento pai do anchor será corpoo target.

tsx

import {
  FlexLayout,
  FlexLayoutContainer,
  FlexLayoutDynamicHeight,
} from "@byeolnaerim/flex-layout";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>
        <FlexLayoutDynamicHeight />

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

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

sincronização de target específico

targetRefse passado, sincroniza a altura do elemento em vez do pai. Pode ser usado em elementos que precisam estabilizar a altura do scroll em conteúdos dinâmicos com altura não especificada (auto), como shell, root de portal, ou áreas de documento separadas.

tsx

"use client";

import { FlexLayoutDynamicHeight } from "@byeolnaerim/flex-layout";
import { useRef } from "react";

export default function DocumentShell({ children }: { children: React.ReactNode }) {
  const shellRef = useRef<HTMLDivElement | null>(null);

  return (
    <div ref={shellRef}>
      <FlexLayoutDynamicHeight targetRef={shellRef} />
      {children}
    </div>
  );
}

método de medição

durante a medição, a altura do target é temporariamente autoliberada, scrollHeight, refletindo a altura do viewport, padding, borda e a margem inferior do último filho para calcular o seguintealturado elemento alvo e altura mínima. Medições são repetidas em mudanças no DOM, redimensionamento, redimensionamento/scroll do visualViewport e conclusão do carregamento de fontes.

manipula diretamente o estilo

este componente altera intencionalmente o inline do elemento target. alturado elemento alvo e altura mínimase já houver código controlando o mesmo estilo diretamente, não aplique simultaneamente ao mesmo target.

props

extraHeight

계산된 height에 추가로 더할 값입니다. 기본값은 0입니다.

extraHeightUnit

extraHeight의 단위입니다. px 또는 %를 사용할 수 있으며 기본값은 px입니다.

targetRef

height/minHeight를 동기화할 target element ref입니다. 생략하면 anchor의 parent element를 사용합니다.