Ancla

Navegación de índice que se sincroniza con el desplazamiento. Al hacer clic salta a la zona de destino y, al desplazarse, resalta la sección actual.

Ancla

<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>Rocas y montañas</h3>
          <p>Pinceladas en forma de gotas de lluvia modelan las rocas, con una presencia imponente.</p>
        </div>
        <div id="anchor-b" class="anchor-sec">
          <h3>Árboles del bosque</h3>
          <p>Se entrelazan las hojas trazadas y las hojas punteadas.</p>
        </div>
        <div id="anchor-c" class="anchor-sec">
          <h3>Desembocadura</h3>
          <p>Una cascada en hilera queda suspendida entre las nubes.</p>
        </div>
        <div id="anchor-d" class="anchor-sec">
          <h3>Colofón</h3>
          <p>La firma de Fan Kuan se oculta entre los árboles.</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: 'Rocas y montañas' },
      { id: 'anchor-b', title: 'Árboles del bosque' },
      { id: 'anchor-c', title: 'Desembocadura' },
      { id: 'anchor-d', title: 'Colofón' },
    ],
    scrollerEl: undefined,
  }),
}
</script>

Props

Prop	Descripción	Tipo	Predeterminado
items	Datos de los anclas (admite subniveles)	LhAnchorItem[]	—
target	Contenedor de desplazamiento (selector o elemento; window por defecto)	string \| HTMLElement	—
offset	Desplazamiento de la zona del ancla respecto a la parte superior del contenedor de desplazamiento (para la sincronización)	number	—
direction	Dirección de disposición	'vertical' \| 'horizontal'	'vertical'
smooth	Desplazamiento suave	boolean	false
sx	Propiedades de layout abreviadas	—	—

AnchorItem Props

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

Consejo

Los estilos .anchor-scroller / .anchor-sec del demo son solo de ejemplo (el contenedor de desplazamiento debe aportar su propio overflow-y: auto); la biblioteca no los proporciona.