Ancre

Navigation par ancres au sein de la page, avec mise en évidence synchronisée au défilement. Sémantique <nav> + aria-current="location".

Utilisation de base

Utilisation de base

• Section 1
• Section 2
• Section 2.1

<script setup>
const anchorItems = [
  { id: 'sec-1', title: 'Section 1' },
  { id: 'sec-2', title: 'Section 2', children: [{ id: 'sec-2-1', title: 'Section 2.1' }] },
]
</script>

<template>
  <LhAnchor :items="anchorItems" />
</template>

<script>
export default {
  data() {
    return {
      anchorItems: [
        { id: 'sec-1', title: 'Section 1' },
        { id: 'sec-2', title: 'Section 2', children: [{ id: 'sec-2-1', title: 'Section 2.1' }] },
      ],
    }
  },
}
</script>

<template>
  <LhAnchor :items="anchorItems" />
</template>

Disposition horizontale et options de défilement

direction="horizontal" passe à une disposition horizontale ; smooth désactive le défilement fluide ; offset compense le décalage de la zone d'ancrage par rapport au sommet du conteneur de défilement ; target observe un conteneur de défilement précisé (window par défaut).

Ancres horizontales

• Section 1
• Section 2
• Section 2.1

<script setup>
const anchorItems = [
  { id: 'sec-1', title: 'Section 1' },
  { id: 'sec-2', title: 'Section 2' },
]
</script>

<template>
  <!-- Ancres horizontales -->
  <LhAnchor
    :items="anchorItems"
    direction="horizontal"
    :offset="8"
    :smooth="true"
  />
</template>

<script>
export default {
  data() {
    return {
      anchorItems: [
        { id: 'sec-1', title: 'Section 1' },
        { id: 'sec-2', title: 'Section 2' },
      ],
    }
  },
}
</script>

<template>
  <!-- Ancres horizontales -->
  <LhAnchor
    :items="anchorItems"
    direction="horizontal"
    :offset="8"
    :smooth="true"
  />
</template>

API

LhAnchor Props

Propriété	Description	Type	Valeur par défaut
items	Données des ancres (sous-niveaux pris en charge)	[LhAnchorItem](#type-LhAnchorItem)[]	—
target	Conteneur de défilement (sélecteur ou élément ; window par défaut)	string | HTMLElement	—
offset	Décalage de la zone d'ancrage par rapport au sommet du conteneur de défilement (pour la détermination de la synchronisation)	number	0
direction	Orientation de la disposition	"vertical" | "horizontal"	'vertical'
smooth	Défilement fluide	boolean	true
sx	Propriétés de mise en page rapide sx	LhSxProps	—

Events

Événement	Description	Paramètre de rappel
change	Émis lorsque l'ancre active change (synchronisation au défilement ou clic sur une ancre)	(id: string)
click	Émis lors du clic sur un lien d'ancre (émis avant le saut de défilement)	(event: MouseEvent, id: string)

LhAnchorItem

Champ	Description	Type
id	id de l'élément cible	string
title	Texte affiché	string
children	Ancres enfants	LhAnchorItem[]

Accessibilité

• Le conteneur est un <nav> sémantique doté d'un aria-label ; l'ancre courante est marquée par aria-current="location"
• Les liens sont de véritables <a href="#id"> (navigation possible sans JS, améliorée en défilement fluide lors du clic)
• Le défilement fluide est automatiquement dégradé en saut immédiatif sous prefers-reduced-motion: reduce

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/anchor/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) :

LhAnchorProps

export interface LhAnchorProps {
  /** Données des ancres (sous-niveaux pris en charge) */
  items: LhAnchorItem[]
  /** Conteneur de défilement (sélecteur ou élément ; window par défaut) */
  target?: string | HTMLElement
  /** Décalage de la zone d'ancrage par rapport au sommet du conteneur de défilement (pour la détermination de la synchronisation) */
  offset?: number
  /** Orientation de la disposition */
  direction?: 'vertical' | 'horizontal'
  /** Défilement fluide */
  smooth?: boolean
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

LhFlatAnchorItem _{(provient de @lh-ui/share/core/anchor)}

/** Ancre aplatie (pour le rendu) */
export interface LhFlatAnchorItem {
  id: string
  title: string
  level: number
}

LhAnchorItem _{(provient de @lh-ui/share/core/anchor)}

/** Entrée d'ancre */
export interface LhAnchorItem {
  /** id de l'élément cible */
  id: string
  /** Texte affiché */
  title: string
  /** Ancres enfants */
  children?: LhAnchorItem[]
}