Header-Layout
Steuern Sie den Header-Container mit useFlexLayoutControl. Falten Sie den Header je nach Scrollrichtung und halten Sie den aktuellen Sichtbarkeitsgrad bei Routenänderungen.
root/head Struktur
Um den Header zu steuern, muss der Header FlexLayoutContainerso aufgebaut sein. Normalerweise befindet sich ein Kopf Container im Root-Layout, und der Rest des Bildschirms wird Körper aus Containern zusammengesetzt.
Header steuern
Übergeben Sie die aktuellen pathnameund Ausblendbedingungen aus der Header-Komponente. Verbinden Sie das zurückgegebene contentRefmit dem tatsächlichen Header-Inhaltswrapper.
Falten mit Scrollen
enableScrollHideOnScrollum trueWenn aktiviert, wird der Header-Container beim Scrollen nach unten eingeklappt und beim Scrollen nach oben oder beim Zurückkehren zum Seitenanfang wieder ausgeklappt.
Höhe, display, visibilitynicht durch direkte Änderung von flex-grow Werten des Zielcontainers.FlexLayoutum scrollMode="window"Wenn verwendet FlexLayoutDynamicHeightist eine Konfiguration erforderlich, die die Höhe von Dokument/Body synchronisiert. Andernfalls wird der Header nicht neu dimensioniert. Die aktuelle Seite ist FlexLayoutDynamicHeight Komponenten stabilisieren die Scrollhöhe, und die Funktion zum Einklappen des Headers wird useFlexLayoutControlvon dieser übernommen.verstecken/anzeigen basierend auf Route-Bedingungen
Wenn der Header in einer bestimmten Route explizit versteckt oder angezeigt werden soll, übergeben Sie diese Bedingung hideContainerals Parameter. Wenn der Wert trueist, wird der Header-Container eingeklappt, und wenn der Wert falseist, wird der Header-Container ausgeklappt. In beiden Fällen wird die scrollbasierte automatische Einklappung/Ausklappung deaktiviert.
trueist erzwungenes Verstecken,falseist erzwungenes Anzeigen.null oderundefinednur wennenableScrollHideOnScroll die Einstellungen die scrollbasierte automatische Einklappung/Ausklappung aktivieren.Headergröße verwenden
Wenn die aktuelle sichtbare Größe des Headers benötigt wird, wird der gleiche containerSizeKeyNameZustand erstellt und verwendet.
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 옵션입니다.
Rückgabewert
contentRef
실제 content size를 측정할 wrapper에 연결하는 ref입니다.