Ancla

Navegación por anclas dentro de la página + resaltado sincronizado con el desplazamiento. Semántica <nav> + aria-current="location".

Uso básico

Uso básico

• Sección 1
• Sección 2
• Sección 2, apartado 1

<script setup>
const anchorItems = [
  { id: 'sec-1', title: 'Sección 1' },
  { id: 'sec-2', title: 'Sección 2', children: [{ id: 'sec-2-1', title: 'Sección 2, apartado 1' }] },
]
</script>

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

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

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

Disposición horizontal y opciones de desplazamiento

direction="horizontal" cambia a disposición horizontal; smooth desactiva el desplazamiento suave; offset compensa el desplazamiento de la zona del ancla respecto al borde superior del contenedor de desplazamiento; target escucha un contenedor de desplazamiento concreto (por defecto, window).

Anclas horizontales

• Sección 1
• Sección 2
• Sección 2, apartado 1

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

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

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

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

API

LhAnchor Props

Prop	Descripción	Tipo	Predeterminado
items	Datos de las anclas (admiten subniveles)	[LhAnchorItem](#type-LhAnchorItem)[]	—
target	Contenedor de desplazamiento (selector o elemento; por defecto, window)	string | HTMLElement	—
offset	Desplazamiento de la zona del ancla respecto al borde superior del contenedor (para la determinación de la sincronización)	number	0
direction	Dirección de la disposición	"vertical" | "horizontal"	'vertical'
smooth	Desplazamiento suave	boolean	true
sx	Props de disposición rápida	LhSxProps	—

Events

Evento	Descripción	Parámetros de la retrollamada
change	Se dispara cuando cambia el ancla activa (por sincronización del desplazamiento o al hacer clic en un ancla)	(id: string)
click	Se dispara al hacer clic en el enlace del ancla (se emite antes del salto por desplazamiento)	(event: MouseEvent, id: string)

LhAnchorItem

Campo	Descripción	Tipo
id	id del elemento de destino	string
title	Texto mostrado	string
children	Anclas secundarias	LhAnchorItem[]

Accesibilidad

• El contenedor es un <nav> semántico con aria-label; el ancla actual se marca con aria-current="location"
• Los enlaces son <a href="#id"> reales (funcionan sin JS; al hacer clic se mejora a desplazamiento suave)
• El desplazamiento suave se degrada automáticamente a salto instantáneo con prefers-reduced-motion: reduce

Definiciones de tipos

Las estructuras de tipos TypeScript exportadas por este componente (extraídas automáticamente de packages/components/anchor/src/types.ts y de las fuentes @lh-ui/share/core/*; abre cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhAnchorProps

export interface LhAnchorProps {
  /** Datos de las anclas (admiten subniveles) */
  items: LhAnchorItem[]
  /** Contenedor de desplazamiento (selector o elemento; por defecto, window) */
  target?: string | HTMLElement
  /** Desplazamiento de la zona del ancla respecto al borde superior del contenedor (para la sincronización) */
  offset?: number
  /** Dirección de la disposición */
  direction?: 'vertical' | 'horizontal'
  /** Desplazamiento suave */
  smooth?: boolean
  /** Props de disposición rápida */
  sx?: LhSxProps
}

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

/** Elemento de ancla aplanado (para el renderizado) */
export interface LhFlatAnchorItem {
  id: string
  title: string
  level: number
}

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

/** Elemento de ancla */
export interface LhAnchorItem {
  /** id del elemento de destino */
  id: string
  /** Texto mostrado */
  title: string
  /** Anclas secundarias */
  children?: LhAnchorItem[]
}