Ancrage

Épinglage en haut / en bas lors du défilement. Utilise IntersectionObserver pour détecter le franchissement de l'espace réservé (aucun surcoût de limitation du défilement ; repli automatique vers l'écoute du défilement en l'absence d'environnement IO).

Utilisation de base

Épingler en haut

Barre d'outils épinglée en haut

offset-bottom déclenche l'épinglage en bas (prioritaire sur offset-top) ; target désigne le conteneur de défilement observé (la fenêtre par défaut).

Épingler en bas

Barre d'outils épinglée en bas (offset-bottom)

<script setup lang="ts">
</script>

<template>
  <!-- Épingler en bas -->
  <LhAffix :offset-bottom="8">
    <div class="demo-affix-bar">Barre d'outils épinglée en bas</div>
  </LhAffix>
</template>

<script>
export default {}
</script>

<template>
  <!-- Épingler en bas -->
  <LhAffix :offset-bottom="8">
    <div class="demo-affix-bar">Barre d'outils épinglée en bas</div>
  </LhAffix>
</template>

<script setup lang="ts">
</script>

<template>
  <!-- Épingler en haut -->
  <LhAffix :offset-top="8">
    <div class="demo-affix-bar">Barre d'outils épinglée en haut</div>
  </LhAffix>
</template>

<script>
export default {}
</script>

<template>
  <!-- Épingler en haut -->
  <LhAffix :offset-top="8">
    <div class="demo-affix-bar">Barre d'outils épinglée en haut</div>
  </LhAffix>
</template>

API

LhAffix Props

Propriété	Description	Type	Valeur par défaut
offsetTop	Déclenche l'épinglage en haut lorsque le bord supérieur se trouve à cette distance en px du haut de la fenêtre	number	0
offsetBottom	Déclenche l'épinglage en bas lorsque le bord inférieur se trouve à cette distance en px du bas de la fenêtre (prioritaire sur offsetTop)	number	0
target	Conteneur de défilement observé (sélecteur ou élément ; la fenêtre par défaut)	string | HTMLElement	—
sx	Propriétés de mise en page rapide sx	LhSxProps	—

Events

Événement	Description	Paramètre de rappel
change	Émis lorsque l'état fixe bascule (entrée ou sortie de l'épinglage haut / bas)	(fixed: boolean)

Accessibilité

• Aucun rôle particulier ; l'état fixé ne perturbe pas l'ordre de tabulation du document
• L'espace réservé maintient la hauteur de mise en page afin d'éviter les sauts visuels

Définitions de types

Les structures de types TypeScript exportées par ce composant sont présentées ci-dessous (extraction automatique à partir des sources packages/components/affix/src/types.ts et @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; la description des propriétés se trouve dans le tableau Props ci-dessus) :

LhAffixProps

export interface LhAffixProps {
  /** Déclenche l'épinglage en haut lorsque le bord supérieur se trouve à cette distance en px du haut de la fenêtre */
  offsetTop?: number
  /** Déclenche l'épinglage en bas (prioritaire sur offsetTop) */
  offsetBottom?: number
  /** Conteneur de défilement observé (sélecteur ou élément ; la fenêtre par défaut) */
  target?: string | HTMLElement
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}