Ancre

Navigation de type sommaire, en lien avec le défilement. Un clic accède à la zone cible, le défilement met en surbrillance la section courante.

Ancre

<template>
  <div class="demo-col" style="max-width: 640px">
    <div class="demo-row" style="align-items: flex-start; gap: 24px">
      <div ref="scroller" class="anchor-scroller">
        <div id="anchor-a" class="anchor-sec">
          <h3>Rochers</h3>
          <p>Rochers peints au lavis en gouttes de pluie, d'une allure majestueuse.</p>
        </div>
        <div id="anchor-b" class="anchor-sec">
          <h3>Forêts</h3>
          <p>Feuillages en couleurs plates et en points alternés.</p>
        </div>
        <div id="anchor-c" class="anchor-sec">
          <h3>Cascade</h3>
          <p>Une cascade en fil s'élève dans la brume.</p>
        </div>
        <div id="anchor-d" class="anchor-sec">
          <h3>Inscription</h3>
          <p>La signature de Fan Kuan se dissimule dans la forêt.</p>
        </div>
      </div>
      <LhAnchor :items="items" :target="scrollerEl" :offset="12" direction="vertical" smooth />
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    items: [
      { id: 'anchor-a', title: 'Rochers' },
      { id: 'anchor-b', title: 'Forêts' },
      { id: 'anchor-c', title: 'Cascade' },
      { id: 'anchor-d', title: 'Inscription' },
    ],
    scrollerEl: undefined,
  }),
}
</script>

Props

Prop	Description	Type	Valeur par défaut
items	Données des ancres (sous-niveaux pris en charge)	LhAnchorItem[]	—
target	Conteneur de défilement (sélecteur ou élément, window par défaut)	string \| HTMLElement	—
offset	Décalage de la zone d'ancre par rapport au haut du conteneur de défilement (sert au jugement de liaison)	number	—
direction	Direction d'arrangement	'vertical' \| 'horizontal'	'vertical'
smooth	Défilement fluide	boolean	false
sx	Raccourci de mise en page sx	—	—

AnchorItem Props

Prop	Description	Type	Valeur par défaut
id	id de l'élément cible	string	—
title	Texte affiché	string	—
children	Ancres enfants	LhAnchorItem[]	—

Astuce

Les classes .anchor-scroller / .anchor-sec de la démo sont des styles d'exemple (le conteneur défilant doit fournir son propre overflow-y: auto), la bibliothèque ne les fournit pas.